4 、v-for遍历
4.1 遍历数组中的对象
格式：v-for="item in list"
里面也可以返回下标
格式：v-for="（item.index） in list"
item:可以自定义变量这个值，但是里面的 {{item.id}}中的item需要跟自定义的这个值一致
<li v-for='item in list'>{{item.id}}---{{item.name}}---{{item.age}}</li>
let vue = new Vue({el: "#app",data: {list: [{id: 1, name: "张狗", age: 88 },{id: 2, name: "舔狗", age: 20 },{id: 3, name: "藏獒", age: 10 },{id: 4, name: '狼狗', age: 18 }],}
4.2 遍历对象的属性值
格式：v-for="key in list"
4.3 遍历对象的属性和属性值
格式：v-for="（key，value） in list"
4.4 遍历数字
<li v-for="n in 10">{{n}}</li>
4.5 内置set
以下变动的数组中， Vue 是不能检测到的，也不会触发视图更新：
通过索引直接设置项，比如 app.books[3] = { … }.
修改数组长度，比如叩p.books.length = 1.
为了解决这个问题Vue为我们提供了一个set方法。
格式：
Vue.set(该数组,下标,{// 更新或需要的内容})
以下代码是小练习，实现了升序、降序、增加、更改（更新）
<div id="app"><p> id ：<input type="text" v-model="id"></p><p>name：<input type="text" v-model="name"></p><p>age：<input type="text" v-model="age"></p><li v-for="n in 10">{{n}}</li><button @click="add">增加</button><button @click="update">更新</button><br><ul><li v-for='p in list'>{{p.id}}---{{p.name}}---{{p.age}}</li></ul><button @click="change(1)">按照年龄升序</button><button @click="change(2)">按照年龄降序</button></div>
<script src="./js/vue.min.js"></script><script>let vue = new Vue({el: "#app",data: {list: [{id: 1, name: "张狗", age: 88 },{id: 2, name: "舔狗", age: 20 },{id: 3, name: "藏獒", age: 10 },{id: 4, name: '狼狗', age: 18 }],id:"",name:"",age:"",},methods: {// 添加add() {let arry = {id:this.id,name:this.name,age:this.age};this.list.push(arry);},// 更新update() {Vue.set(this.list,this.id-1,{id:this.id,name:this.name,age:this.age,})},change(num) {if (num == 1) {this.list.sort((v1, v2) => {return v1.age - v2.age})} else {this.list.sort((v1, v2) => {return v2.age - v1.age})}}}});</script>
实现新增
实现更新
升序的实现，降序的实现
5 、下拉列表、单选框、复选框
5.1 单选框
多个单选框如果想要达到互斥的效果，也就是说想成为一组，它们v-model的值必须相等。
当data中的数据与单选按钮的value值一致时，该单选按钮将会被选中。
<div id="app"><input type="radio" value="红茶" v-model="tea">红茶<br><input type="radio" value="绿茶" v-model="tea">绿茶<br><input type="radio" value="白山茶" v-model="tea">白山茶<p>您选中了 {{tea}}</p></div><script src="./js/vue.min.js"></script><script>let vue = new Vue({el:"#app",data:{tea:""}})</script>
5.2 复选框
复选框的使用可以分为单独使用和组合使用。
单独使用： 在input标签中，使用v-model来绑定一个布尔值
组合使用：也是 v-model和value一起使用，多个勾选框都绑定到同一个数组类型的数据，注意，必须是同一个，而且是数组类型
<div id="app"><input type="checkbox" value="红茶" v-model="tea">红茶<br><input type="checkbox" value="绿茶" v-model="tea">绿茶<br><input type="checkbox" value="白山茶" v-model="tea">白山茶<p>您选中了 {{tea}}</p></div><script src="./js/vue.min.js"></script><script>let vue = new Vue({el: "#app",data: {tea: ["红茶"]}})</script>
5.3 下拉列表
v-model需要绑定在select标签中
5.3.1 单选
<div id="app"><select v-model="isSelected"><option value="冬瓜">冬瓜</option><option value="西瓜">西瓜</option><option value="南瓜">南瓜</option></select></div>
var app = new Vue({el:"#app",data:{isSelected:"西瓜"}})
5.3.1 多选
给select标签添加 multiple属性 就可以多选了，此时v-model绑定的是一个数组，与复选框用
