vue3教程-v-text指令

介绍

功能与插值表达式相同:显示数据。但写法不同,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>

原文出处:/show_1GWEeiNBbL2.html