vue06-三種資料繫結方式
阿新 • • 發佈：2018-12-11
<!DOCTYPE html> <html lang=en> <head> <meta charset="utf-8"/> <title>三種模板語法</title> <script src="vue.js"></script> </head> <body> <div id="app"> <div>{{name}}</div> <!-- 也是資料繫結的語法和{{}}一樣 --> <div v-text="name"></div> <div v-html="name"></div> <div>{{name + ' hot'}}</div> <div v-text="name+' hot'"></div> <div v-html="name+ ' hot'"></div> </div> <script> //每個v-開頭的，後面都可以去寫js表示式，不僅僅是變數 var app = new Vue({ el:'#app', //vue例項處理哪個dom data:{ //定義資料 name:'<h1>hello world</h1>' } }) </script> </body> </html>
1.{{name}} 插值表示式
2.v-text 與{{}}一樣
3.v-html 會解析html標籤
vue每個屬性都可以寫js表示式，不僅僅時變數
因此可以這麼寫：
<div>{{name + ' hot'}}</div>
<div v-text="name+' hot'"></div>
<div v-html="name+ ' hot'"></div>執行效果：
