1.v-text的缩写为 {{}}
2.v-text和v-html都为单项绑定,即就是把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。因此,我们不需要进行额外的DOM操作,只需要进行Model的操作就可以实现视图的联动更新。
3.v-mdel为双向绑定,即把Model绑定到View的同时也将View绑定到Model上,这样就既可以通过更新Model来实现View的自动更新,也可以通过更新View来实现Model数据的更新。所以,当我们用JavaScript代码更新Model时,View就会自动更新,反之,如果用户更新了View,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 v-html="model"></p>
<p v-text="model"></p>
</div>
<script>
var vm = new Vue({
el:"#mydiv",
data:{
model:"<h1>v-model测试<h1>"
}
})
</script>
</body>
</html>