模板語法對於高效的編寫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
來處理。效果如下: