vue教程-v-text指令

介绍

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

原文出处:/show_1IXIPze8BlF.html