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的區別