Vue.js双向绑定下实现input绑定值字符串反转义的方案咨询

先纠个认知偏差：<input>是表单类自闭合元素，它的渲染只认value属性里的纯文本，v-html绑在input上根本不生效，本来就不是适用于这个场景的方案。你要解决的核心逻辑很简单：只要保证绑给input的字符串本身是已经反转义完成的正常文本，v-model的双向绑定逻辑就能正常工作，根本不需要特殊改造。

可落地的实现方案 #

1. 双向计算属性（最贴合v-model原生绑定逻辑） #

如果你需要同时兼顾「接口返回的转义值正常展示」和「用户输入的内容能正确同步回模型」，用带get/set的计算属性替换原来直接绑的data字段是最顺的写法，不需要改动HTML里的绑定语法：

• 把接口返回的原始转义字符串存在data的独立字段里
• 计算属性的get阶段统一做反转义处理，把正常文本返回给input展示
• 计算属性的set阶段接收用户输入的内容，同步更新原始字段

具体代码可以直接套你原来的组件结构：

export default {
    props: ['user'],
    data() {
        return {
            // 存储接口返回的原始转义值
            rawWebsite: ''
        }
    },
    computed: {
        // 给input绑定的双向属性，和原来v-model的用法完全一致
        website: {
            get() {
                return this.unescapeHtml(this.rawWebsite)
            },
            set(inputVal) {
                // 不需要额外转义的话直接赋值就行
                this.rawWebsite = inputVal
            }
        }
    },
    methods: {
        // 通用HTML实体反转义，零依赖不用引库
        unescapeHtml(escapedStr) {
            if (!escapedStr) return ''
            const tempEl = document.createElement('textarea')
            tempEl.innerHTML = escapedStr
            return tempEl.value
        }
    },
    created() {
        // 从props的user里取初始值，不要在data里直接读全局userInfo
        this.rawWebsite = this.user?.properties?.website || ''
    }
}

HTML部分完全不用改，还是原来的写法：

<input v-model.trim="website" type="text" name="website">

2. 初始化阶段直接预处理 #

如果你的场景里website值只在组件加载时取一次，后续没有其他来源的转义值注入，那连计算属性都不用写，只要在给data的website字段赋值的时候，提前把转义字符串处理成正常文本就行：

data() {
    return {
        website: this.unescapeHtml(this.user?.properties?.website || '')
    }
},
methods: {
    unescapeHtml(escapedStr) {
        // 同上的反转义逻辑
    }
}

这种写法下v-model的逻辑完全没改动，因为传给input的初始值已经是处理好的正常文本，自然不会显示转义串。

你提到的几个方案的适配性说明 #

• 过滤器：Vue的过滤器不能直接嵌入v-model的绑定语法里，单独用过滤器没法实现自动的字符串处理，最多就是把过滤器里的反转义逻辑抽成通用方法用，没有独立的使用价值
• Underscore.js：Underscore核心库本身没有内置HTML实体反转义的能力，为了这个场景引入整个库的成本远高于自己写几行的处理函数，完全没必要

内容的提问来源于stack exchange，提问作者DolDurma