vue.js数据绑定的方法(单向、双向和一次性绑定)

2020-06-13 10:41:35易采站长站整理

}
});
</script>

出于安全考虑,默认的数据绑定,会进行转义操作,屏蔽掉 html 标签。使用 v-html 指令,可以实现对文本内容不转义输出。这里的输出会替换掉目标标签的 innerHTML 代码中 p 标签中原本的文本将被替换,angular 中也有类似的 ng-bind-html。

双向绑定


<div id="app">
<div>{{input}}</div>
<textarea v-model="input"></textarea>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
input: 'two-way-binding'
}
});
</script>

跟 angular 一模一样,双向绑定依赖于 v-model 指令。修改 textarea 中的内容的时候, {{input}} 将让内容同步更新到对应的 div 元素中。