介绍
功能与插值表达式相同:显示数据。但写法不同,v-text 写在标签中
填充纯文本
<div v-text="msg"></div>
<!-- 功能和插值表达式一样 -->
<div>{{msg}}</div>
优点: 没有闪动。不像插值表达式,为了解决闪动,需要用 v-cloak 指令
例子
<script type="importmap">
{
"imports": {
"vue": "./js/vue.esm-browser@3.5.13.js"
}
}
</script>
<script type="module">
import { createApp } from 'vue'
createApp({
data() {
return {
msg: 'Hello Vue!'
}
}
}).mount('#app')
</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 type="module">
import { createApp } from 'vue'
createApp({
data() {
return {
msg: 'Hello Vue!',
name: '李雷',
age: 20
}
}
}).mount('#app')
</script>