Vue指令之v-text、v-html和v-pre指令

本文转载自查看原文 2021-01-23 18:36 334 Vue

v-text指令

v-text指令是填充纯文本，简略写法就是插值表达式，不会存在闪动问题，插值表达式和v-text都可以使用表达式进行运算

v-html指令

v-html指令是填充HTML片段，简略写法是“{{{ }}}”，但是在Vue1.x之后的版本已经去除了

存在一定的安全问题，本网站内部的数据可以使用，来自第三方的数据不可使用

v-pre指令

v-pre指令是填充原始信息，在Vue中跳过了表达式的编译过程，显示原始数据。

<body>
    <div id='app'>
        <!-- 使用v-text指令 -->
        <p v-text="text"> </p>
        <!-- 使用v-html指令 -->
        <div v-html="html"></div>
        <!-- 使用v-pre指令 -->
        <p v-pre> {{这是v-pre指令}} </p>
    </div>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    new Vue({
        el: '#app',
        data: {
            text:'v-text指令',
            html:`<p>这是v-html指令</p>`,
        },
    })
</script>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 v-clock、v-text、v-html和v-pre详解 v-text v-html等指令的使用 vue 中 {{}} 和 v-text 和 v-html 区别 Vue中v-text和v-html的用法和区别 v-text,v-html等区别一起学vue指令之v-pre Vue：v-on、v-bind、v-model、v-text、v-html用法 Vue之v-clock和v-text和v-html的区别 vue2.0 之文本渲染-v-html、v-text vuejs {{}}，v-text 和 v-html的区别