技術標籤：前端vuevuejavascript前端html

Vue作為現在Web前端三大框架之一，異常的火爆，曾被選為GitHub最受歡迎開源專案。
當你學完HTML、CSS、JS的基礎知識後，想入手一個前端框架，Vue是最佳的選擇，它的門檻沒有那麼高，普及應用率卻很高，成為現在Web前端工程師必會技術棧之一。
這篇部落格的學習目標是v-text、v-html指令

v-text

這個指令的作用和插值表示式{{}}很相似。
先看一段程式碼：

    <div id="app">
        <p>{{message}}</p>
    </
 
div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'Hello!'
            }
        });
   </script>

這是最簡單的插值表示式{{}}的用法。

沒有問題，我們通過雙括號成功將data的數值展示在了p標籤上。
我們再看下面一段程式碼：

<div id="app">
<p v-text="message"
 
></p>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:'Hello!'
        }
    });
</script>

這次我們使用v-text指令，展示message的內容

沒有問題，現在看起來，這兩種方法似乎一摸一樣，但是，如果我們對程式碼進行一下小小的修改。

    <div id="app">
    <p>哈哈哈{{message}}</
 
p>
    <p v-text="message">哈哈哈</p>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'Hello!'
            }
        });
    </script>

看出區別了嗎，嘿嘿~
插值表示式{{}}只會替代自己那個佔位符，不會影響元素其它內容的展示。
但是v-text會完全覆蓋元素的原本內容。
這兩種方法在實際的開發場景中，都有相應的應用，大家要區分開！

v-html

我們前面已經瞭解了插值表示式{{}}和v-text，它們都可以展示出data中相應變數的值，但是如果我們現在拿到的變數的值是一段程式碼字串呢？
在曾經前後端不分離的時代，後端經常會給我們返回一些程式碼字串，我們經過一些處理後要渲染到頁面上。
我們先試一下插值表示式{{}}和v-text展示程式碼字串的樣子。

<div id="app">
<p>{{code}}</p>
<p v-text="code"></p>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            code:'<h3>我是程式碼，哈哈，你能把我渲染出來嗎</h3>'
        }
    });
</script>

顯然，無論是插值表示式{{}}還是v-text都不能滿足我們的需求。
v-html的作用就是來完成這種需求的。

<div id="app">
    <p v-html="code"></p>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            code:'<h3>我是程式碼，哈哈，你能把我渲染出來嗎</h3>'
        }
    });
</script>

很完美。
但是需要提醒的一點是，v-html最好要謹慎使用，如果你的程式碼考慮的不嚴謹的話，這樣很容易遭到黑客的xss攻擊。還有一點就是，v-html和v-text都會完全覆蓋元素的原本內容。

有微信小程式課設、畢設需求聯絡個人QQ：505417246

關注下面微信公眾號，可以領取微信小程式、Vue、TypeScript、前端、uni-app、全棧、Nodejs、Python等實戰學習資料