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 指令,实现数据绑定
<!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>
浏览器运行效果,如下图所示:
div 中的 p 标签的文本被 vue 实例对象中 data 属性值原样替换。
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 对象里面的属性。
浏览器运行效果,如下图所示:
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 指令会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个占位符。