介绍
功能与插值表达式相同:显示数据。但写法不同,v-text 写在标签中
官网:https://cn.vuejs.org/v2/api/#v-text
填充纯文本
<div v-text="msg"></div>
<!-- 功能和插值表达式一样 -->
<div>{{msg}}</div>
优点: 没有闪动。不像插值表达式,为了解决闪动,需要用 v-cloak 指令
例子
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<div id="app">
<div v-text="msg"></div>
<!-- 功能和插值表达式一样 -->
<div>{{msg}}</div>
</div>
<script>
var app = new Vue({
el: '#app', //找到id是app的元素
data: { //数据
msg: 'Hello Vue!'
}
})
</script>
支持运算
类似插值表达式,也支持一些运算
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<div id="app">
<div v-text="msg"></div>
<div v-text="1+1"></div>
<div v-text="1>2"></div>
<div v-text="1+'a'"></div>
最终成绩(平时分40%+期末考试60%):<span v-text="psf*0.4 + qm * 0.6 "></span>
</div>
<script>
var app = new Vue({
el: '#app', //找到id是app的元素
data: { //数据
msg: 'Hello Vue!',
psf:30,// 平时分30
qm:70, // 期末考试成绩70分
}
})
</script>