三、Vue中的属性绑定（v-bind）和双向数据绑定（v-mod
2019-02-13 本文已影响0人
李浩然_6fd1
三、Vue中的属性绑定（v-bind）和双向数据绑定（v-model）
属性绑定（v-bind）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性绑定</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<div title="title">hello world</div>
</div>
<script>
new Vue({
el:"#root",
data: {
title:"this is hello world"
}
})
</script>
</body>
</html>
此例子中，若想div标签的title属性变成this is hello world，上述例子是达不到要求的，最终title属性显示的只是“title”。怎么操作实例，让实例中的数据项和模板的属性绑定？
答案是需要一个新的模板指令v-bind。上式div即写成
<div v-bind:title="title">hello world</div>
意思是div中的title属性和数据项绑定。
需注意到：
1、只要模板中有模板指令（比如v-bind），等号后面的表达式将不是字符串，变成js表达式，
2、“v-bind：”可以简写成“：”
双向数据绑定（v-model）
要理解双向数据绑定，先理解一下我们常用的单项数据绑定 ：
<body>
<div id="root">
<div title="title">hello world</div>
<input />
<div>{{content}}</div>
</div>
<script>
new Vue({
el:"#root",
data: {
title:"this is hello world",
content:"this is content"
}
})
</script>
</body>
如上，单项绑定即是Vue实例中的数据写什么（this is content），模板中就会显示什么，即数据决定页面的显示（模板），但是页面的显示无法决定数据的内容。
双向绑定即既有单项绑定中的数据决定页面的显示，也有在输入框中输入的内容可以变更到Vue实例中的数据里。
解决方案是一个新的模板指令v-model，如下：
<body>
<div id="root">
<div title="title">hello world</div>
<input v-model="content"/>
<div>{{content}}</div>
</div>
<script>
new Vue({
el:"#root",
data: {
title:"this is hello world",
content:"this is content"
}
})
</script>
</body>
这样，在输入框里输入什么内容，在div标签内的content都可以提现出来，即显示决定Vue实例中的数据。
注：我在写代码的时候试过，v-model后面加上title或者value的时候，即写成v-model：value，结果与直接写v-model一样，没有变化。
