vue使用v-html解析数据后如何添加v-model绑定
时间: 2023-10-18 14:07:42 浏览: 39
使用 v-html 指令渲染 HTML 是不支持将数据绑定到 HTML 元素上的,因为 v-html 只是将一个字符串插入到指定元素中,它本身并不是一个组件或元素。如果需要实现类似的功能,可以使用 Vue.js 提供的自定义组件来实现。
下面是一个示例代码,其中通过自定义组件 `v-html-input` 来实现将数据绑定到输入框中:
```html
<template>
<div>
<div v-html="html"></div>
<v-html-input v-model="html"></v-html-input>
</div>
</template>
<script>
Vue.component('v-html-input', {
template: '<input v-bind="$attrs" v-on="$listeners" v-model="innerHtml">',
props: ['value'],
computed: {
innerHtml: {
get: function () {
return this.value;
},
set: function (newValue) {
this.$emit('input', newValue);
}
}
}
});
new Vue({
el: '#app',
data: {
html: '<p>Hello, world!</p>'
}
});
</script>
```
在上面的示例中,我们通过自定义组件 `v-html-input` 来实现将数据绑定到输入框中。这个组件接收一个 value 属性,用来接收父组件传递的数据,同时使用 v-model 指令将输入框的值与内部的 innerHtml 属性双向绑定。当输入框的值发生变化时,通过 $emit 方法将变化的值发送一个 input 事件到父组件中,从而实现数据的双向绑定。