2018-05-08 14:55:07 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## v-model：双向数据绑定
|
|
|
|
|
|
|
2018-05-08 19:20:21 +08:00
|
|
|
|
之前的文章里，我们通过v-bind，给`<input>`标签绑定了`data`对象里的`name`属性。当`data`里的`name`的值发生改变时，`<input>`标签里的内容会自动更新。
|
|
|
|
|
|
|
|
|
|
|
|
可我现在要做的是：我在`<input>`标签里修改内容，要求`data`里的`name`的值自动更新。从而实现双向数据绑定。该怎么做呢？这就可以利用`v-model`这个属性。
|
|
|
|
|
|
|
|
|
|
|
|
**区别**：
|
|
|
|
|
|
|
|
|
|
|
|
- v-bind：只能实现数据的**单向**绑定，从 M 自动绑定到 V。
|
|
|
|
|
|
|
|
|
|
|
|
- v-model：只有`v-model`才能实现**双向**数据绑定。注意，v-model 后面不需要跟冒号，
|
|
|
|
|
|
|
|
|
|
|
|
**注意**：v-model 只能运用在**表单元素**中。常见的表单元素包括：input(radio, text, address, email....) 、select、checkbox 、textarea。
|
2018-05-08 14:55:07 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
代码举例如下：
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<title>Document</title>
|
|
|
|
|
|
<script src="vue.js"></script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="app">
|
|
|
|
|
|
|
|
|
|
|
|
<form action="#">
|
2018-05-08 19:20:21 +08:00
|
|
|
|
<!-- 将 input 标签中的value值双向绑定到 Vue实例中的data。注意，v-model 后面不需要跟冒号 -->
|
2018-05-08 14:55:07 +08:00
|
|
|
|
<input type="text" id="username" v-model="myAccount.username">
|
|
|
|
|
|
<input type="password" id="pwd" v-model="myAccount.userpwd">
|
|
|
|
|
|
|
|
|
|
|
|
<input type="submit" v-on:click="submit1" value="注册">
|
|
|
|
|
|
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var vm = new Vue({
|
|
|
|
|
|
el: '#app',
|
|
|
|
|
|
//上面的标签中采用v-model进行双向数据绑定，数据会自动更新到data里面来
|
|
|
|
|
|
data: {
|
|
|
|
|
|
name: 'smyhvae',
|
|
|
|
|
|
myAccount: {username: '', userpwd: ''}
|
|
|
|
|
|
},
|
|
|
|
|
|
//在methods里绑定各种方法，根据业务需要进行操作
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
submit1: function () {
|
|
|
|
|
|
alert(this.myAccount.username + " pwd=" + this.myAccount.userpwd);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
此时，便可实现我们刚刚要求的双向数据绑定的效果。
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## v-for：for循环
|
|
|
|
|
|
|
|
|
|
|
|
**作用**：根据数组中的元素遍历指定模板内容生成内容。
|
|
|
|
|
|
|
|
|
|
|
|
### 引入
|
|
|
|
|
|
|
|
|
|
|
|
比如说，如果我想给一个`ul`中的多个`li`分别赋值1、2、3...。如果不用循环，就要挨个赋值：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="app">
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>{{list[0]}}</li>
|
|
|
|
|
|
<li>{{list[1]}}</li>
|
|
|
|
|
|
<li>{{list[2]}}</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var vm = new Vue({
|
|
|
|
|
|
el: '#app',
|
|
|
|
|
|
data: {
|
|
|
|
|
|
list: [1, 2, 3]
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
效果：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
为了实现上面的效果，如果我用`v-for`进行赋值，代码就简洁很多了：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="app">
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<!-- 使用v-for对多个li进行遍历赋值 -->
|
|
|
|
|
|
<li v-for="item in list">{{item}}</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var vm = new Vue({
|
|
|
|
|
|
el: '#app',
|
|
|
|
|
|
data: {
|
|
|
|
|
|
list: [1, 2, 3]
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
接下来，我们详细讲一下`v-for`的用法。需要声明的是，Vue 1.0的写法和Vue 2.0的写法是不一样的。本文全部采用Vue 2.0的写法
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 数组的遍历赋值
|
|
|
|
|
|
|
|
|
|
|
|
针对下面这样的数组：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<script>
|
|
|
|
|
|
new Vue({
|
|
|
|
|
|
el: '#app',
|
|
|
|
|
|
data: {
|
|
|
|
|
|
arr1: [2, 5, 3, 1, 1],
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
将数组中的**值**赋给li：
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<li v-for="item in arr1">{{item}}</li>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
将数组中的**值和index**赋给li：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<!-- 括号里如果写两个参数：第一个参数代表值，第二个参数代表index -->
|
|
|
|
|
|
<li v-for="(item,index) in arr1">值：{{item}} --- 索引：{{index}}</li>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
效果如下：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 对象的遍历赋值
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
针对下面这样的对象：
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<script>
|
|
|
|
|
|
new Vue({
|
|
|
|
|
|
el: '#app',
|
|
|
|
|
|
data: {
|
|
|
|
|
|
obj1: {
|
|
|
|
|
|
name: 'smyhvae',
|
|
|
|
|
|
age: '26',
|
|
|
|
|
|
gender: '男'
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
将上面的`obj1`对象的数据赋值给li，写法如下：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="app">
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<!-- 括号里如果写两个参数：则第一个参数代表value，第二个参数代表key -->
|
|
|
|
|
|
<li v-for="(value,key) in obj1">值：{{value}} --- 键：{{key}} </li>
|
|
|
|
|
|
|
|
|
|
|
|
<h3>---分隔线---</h3>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 括号里如果写三个参数：则第一个参数代表value，第二个参数代表key，第三个参数代表index -->
|
|
|
|
|
|
<li v-for="(value,key,index) in obj1">值：{{value}} --- 键：{{key}} --- index：{{index}} </li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
效果如下：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## v-if：设置元素的显示和隐藏
|
|
|
|
|
|
|
|
|
|
|
|
**作用**：根据表达式的值的真假条件，来决定是否渲染元素，如果为false则不渲染（达到隐藏元素的目的），如果为true则渲染。
|
|
|
|
|
|
|
|
|
|
|
|
在切换时，元素和它的数据绑定会被销毁并重建。
|
|
|
|
|
|
|
|
|
|
|
|
举例如下：（点击按钮时，切换和隐藏盒子）
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<title>Document</title>
|
|
|
|
|
|
<script src="vue.js"></script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="app">
|
|
|
|
|
|
<button v-on:click="toggle">显示/隐藏</button>
|
|
|
|
|
|
<div v-if="isShow">我是盒子</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
new Vue({
|
|
|
|
|
|
el: '#app',
|
|
|
|
|
|
data: {
|
|
|
|
|
|
isShow: true
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
toggle: function() {
|
|
|
|
|
|
this.isShow = !this.isShow;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
效果如下：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## v-show：设置元素的显示和隐藏
|
|
|
|
|
|
|
|
|
|
|
|
**作用**：根据表达式的真假条件，来切换元素的 display 属性。如果为false，则在元素上添加 `display:none`属性；否则移除`display:none`属性。
|
|
|
|
|
|
|
|
|
|
|
|
举例如下：（点击按钮时，切换和隐藏盒子）
|
|
|
|
|
|
|
|
|
|
|
|
我们直接把上一段代码中的`v-if`改成`v-show`就可以了：
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<title>Document</title>
|
|
|
|
|
|
<script src="vue.js"></script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div id="app">
|
|
|
|
|
|
<button v-on:click="toggle">显示/隐藏</button>
|
|
|
|
|
|
<div v-show="isShow">我是盒子</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
new Vue({
|
|
|
|
|
|
el: '#app',
|
|
|
|
|
|
data: {
|
|
|
|
|
|
isShow: true
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
toggle: function() {
|
|
|
|
|
|
this.isShow = !this.isShow;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
效果如下：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
**v-if和v-show的区别**：
|
|
|
|
|
|
|
|
|
|
|
|
`v-if`和`v-show`都能够实现对一个元素的隐藏和显示操作。但是`v-if`表示添加/删除DOM元素；而`v-show`是在这个元素上添加/移除`style="display:none"`属性，表示节点的显示和隐藏。
|
|
|
|
|
|
|
