Vue.js初次嘗試,模板語法(六)

模板語法對於高效的編寫web頁面提供了便利。如果你有其他框架或者模板引擎的學習經驗那麼對於Vue.js的模板語法會很快的上手。當然如果沒有其他的學習經驗,也不用擔心,Vue.js的社區文檔寫的很詳細,花點時間閱讀以下就明白了。

一、插值

如何將一個值在html元素中展示?正常的情況下使用{{}}兩個花括號;但是這個不是銀彈如果是要展示html代碼呢?對於html代碼,{{}}會將解析爲普通的文本。

你可以直接複製如下代碼,查看運行效果,這裏呈現的都是正確的結果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板語法</title>
    <!-- 開發環境版本,包含了有幫助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--利用“{{}}”雙花括號取值-->
        <p>{{message}}</p>

        <!--渲染html代碼-->
        <div v-html="myTag"></div>

    </div>

</body>
</html>

<script type="text/javascript">
    //定義data數據,數據類型是Json對象
    var data = {message:"我是單純的文字信息",myTag:'<p style="color: red">Hello world!</p>'};

    //創建Vue實例
    var app =new Vue({
        el:'#app',
        data:data
    })


</script>

如果你想嘗試一下使用{{}}來渲染html代碼,你會發現那些代碼並沒有被正確的解析。這時候可以使用v-html來處理。效果如下:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章