1、{{}}和v-text一樣：直接輸出
2、v-html ：html解析後輸出
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{}} v-text v-html</title>
<!--引入vue-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="mydiv">
<p>{{content}}</p>
<p v-text="text"></p>
<p v-html="html"></p>
</div>
<script>
new Vue({
el:"#mydiv",
data:{
content:"<p>測試差值表達式</p>",
text:"<p>測試v-text指令</p>",
html:"<p>測試v-html指令</p>",
}
})
</script>
</body>
</html>
運行結果：
3、v-model 雙向綁定
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
<!--引入vue-->
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="mydiv">
<input v-model="model">
<p>{{model}}</p>
</div>
<script>
new Vue({
el:"#mydiv",
data:{
model:"v-model測試"
}
})
</script>
</body>
</html>
運行結果：
改變輸入框中的值，顯示效果如下：
