Vue.js v-text指令

Vue.js v-text教程

Vue.js v-text 指令用于操作纯文本,它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变,插值处的内容也会随之更新。

Vue.js v-text 指令的绑定为单向绑定(区别于 v-model 指令),数据对象上的值改变,插值会发生变化,但是当插值发生变化并不会影响数据对象的值。

Vue.js v-text 指令 可以简写为 {{}},即 “Mustache” 语法,v-text 指令可以支持逻辑运算。

Vue.js v-text 指令与 Vue.js 插值表达式 语法略有区别,v-text 指令会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个占位符。

案例

Vue.js v-text指令

使用 Vue.js v-text 指令,实现数据绑定

<!DOCTYPE html> <html> <head> <title>vue v-text指令</title> <script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script> </head> <body> <div id="app"> <p v-text=msg></p> <p>嗨客网(www.haicoder.net)</p> </div> </body> <script type="text/javascript"> var vm = new Vue({ el :'#app', data:{ msg:'<h2>Hello HaiCoder</h2>' } }) </script> </html>

浏览器运行效果,如下图所示:

03 vue vtext.png

div 中的 p 标签的文本被 vue 实例对象中 data 属性值原样替换。

Vue.js v-text指令

Vue.js v-text 指令与 {{}} 区别

<!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script> </head> <body> <div id="app"> <!-- <p v-text="Hello msg"></p> --> <p>Hello {{msg}}</p> <p>嗨客网(www.haicoder.net)</p> </div> </body> <script type="text/javascript"> var vm = new Vue({ el :'#app', data:{ msg:'Vue' } }) </script> </html>

原本我们想实现 div 中的第一个 p 标签输出 ‘Hello Vue’ ,但实际浏览器报错没有任何输出,注释掉第一个 p 标签,此时第二个 p 标签输出了 ‘Hello Vue’。

因为 vue v-text 指令 会将整个 ‘Hello msg’ 当成一个 vue 对象里面的属性,而第二个 p 标签只是将 msg 当成了 vue 对象里面的属性。

浏览器运行效果,如下图所示:

04 vue vtext.png

v-text指令与v-html区别

Vue v-text 指令与 v-html 指令唯一不同在于,v-text 指令将数据解析为纯文本,而 v-html 指令是可以解析 html 的。

Vue.js v-text指令总结

Vue.js v-text 指令用于操作纯文本,它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变,插值处的内容也会随之更新。

Vue.js v-text 指令的简写形式为 {{}},只支持单向绑定,同时可以支持逻辑运算。

Vue.js v-text 指令与 Vue.js 插值表达式语法略有区别,v-text 指令会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个占位符。