列表渲染

跟条件渲染一样，列表渲染也会尽可能的复用元素，所以也是使用key来避免复用。

<div v-for="(item,idx) of arr" :key="item.id">{{item.name}}</div>

new Vue({
  el: "#app",
  data: {
    arr:[{id:"9527",name:"小明"},{id:"7788",name:"小红"}]
  }
});

%accordion% 练习🚀 %accordion%

<div id="app">
    <div v-for="(item,idx) of arr" :key="idx">{{item}}</div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            // arr: [1, 2, 3],
            arr: ["我是div1", "我是div2", "我是div3"],
        }
    })
</script>

%/accordion%

数组的更新检测

因为vue2内部使用了Object.definePrototype方法的原因，直接控制数组的成员来修改，是无法让标签同步渲染的。

<button @click="change">按钮</button>
<div v-for="item of arr">{{item}}</div>

new Vue({
  el: "#app",
  data: {
    arr:[1,2,3,4,5]
  },
  methods: {
    change(){
			this.arr[5] = "x"//无效
			
			this.arr.push("x")//有效，需要使用数组变异方法。

      this.$set(this.arr,5,"x")//有效，$set是Vue内部提供的更改数组和对象的方法。
			//this.$set(修改哪个数据,修改第几个成员,修改成什么)
    }
  },
});

%accordion% 练习🚀 %accordion%

<div id="app">
    <button @click="add">按钮</button>
    <div v-for="(item,idx) of arr" :key="idx">{{item}}</div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            // arr: [1, 2, 3], //也给这样哦
            arr: ["我是div1", "我是div2", "我是div3"],
        },
        //添加方法
        methods: {
            add() {//点击方法
                this.$set(this.arr, 3, "点击我才能出现哦")
            }
        },
    })
</script>

%/accordion%

对象更新检测

与数组一样，对象也是无法直接更新同步的。

<button @click="change">按钮</button>
<div v-for="value of obj">{{value}}</div>

new Vue({
  el: "#app",
  data: {
    obj:{name:"小明",age:18,sex:"男"}
  },
  methods: {
    change(){
      this.obj.hobby = "打游戏"//无效

			this.$set(this.obj,"hobby","打游戏")//有效

			this.obj = Object.assign({},this.obj,{//可以同时修改多个属性
        hobby:"打游戏",
        address:"黄村"
      })
    }
  },
});

列表过滤

1、计算属性过滤器

<div v-for="item of filterArr">{{item}}</div>

new Vue({
  el: "#app",
  data: {
    arr:[1,2,3,4,5]
  },
  computed:{
    filterArr(){//计算属性的过滤器
       return this.arr.filter((item)=>{
        return item % 2 === 0
      })
    }
   }
});

2、函数过滤器

<div v-for="item of filterArr(arr)">{{item}}</div>

new Vue({
  el: "#app",
  data: {
    arr:[1,2,3,4,5]
  },
  methods: {
    filterArr(arr){
      return arr.filter((item)=>{
        return item % 2 === 0
      })
    }
  },
});

练习

数组的每个成员进行增、删、改

<button @click="change">按钮</button>
<div v-for="item of arr">{{item}}</div>

new Vue({
  el: "#app",
  data: {
    arr:[{name:"小明",age:18},{name:"小红",age:19},{name:"小黄",age:20}]
  },
  methods: {
    change(){
      this.arr.map((item)=>{//增
        this.$set(item,"sex","男")
      })

      this.arr.map((item)=>{//改
        this.$set(item,"age",16)
      })

      this.arr.map((item)=>{//删
        this.$delete(item,"age")
      })
    }
  },
});

%accordion% 错误写法🚀 %accordion%

<div id="app">
    <button @click="add">按钮</button>
    {{obj}}
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            obj: { name: "张三", age: 18 }
        },
        //添加方法
        methods: {
            add() {//点击方法
                //错误写法
                this.obj.ag = 18
                console.log(this.obj);
            },
        },
    });
</script>

%/accordion%

%accordion% 修改单个属性😀 %accordion%

<div id="app">
    <button @click="add">按钮</button>
    {{obj}}
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            obj: { name: "张三", age: 18 }
        },
        //添加方法
        methods: {
            add() {//点击方法
                //修改单个属性
                this.$set(this.obj, "age", 666)
                this.$set(this.obj, "sex", "男")
        },
    });
</script>

%/accordion%

%accordion% 修改多个属性😂 %accordion%

<div id="app">
    <button @click="add">按钮</button>
    {{obj}}
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            obj: { name: "张三", age: 18 }
        },
        //添加方法
        methods: {
            add() {//点击方法
                //修改多个属性
                this.obj = Object.assign({}, this.obj, {
                    age: 666,
                    sex: "男",
                });
            },
        },
    });
</script>

%/accordion%

%accordion% 删除属性🤣 %accordion%

<div id="app">
    <button @click="add">按钮</button>
    {{obj}}
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            obj: { name: "张三", age: 18 }
        },
        //添加方法
        methods: {
            add() {//点击方法
                //删除属性
                this.$delete(this.obj, "age")
            },
        },
    });
</script>

集成

<div id="app">
    <button @click="add">按钮</button>
    {{obj}}
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            // arr: [1, 2, 3],
            obj: { name: "张三", age: 18 }
        },
        //添加方法
        methods: {
            add() {//点击方法
                //错误写法
                // this.obj.ag = 18
                // console.log(this.obj);

                //修改单个属性
                // this.$set(this.obj, "age", 666)
                // this.$set(this.obj, "sex", "男")

                //修改多个属性
                this.obj = Object.assign({}, this.obj, {
                    age: 66,
                    sex: "男",
                });

                //删除属性
                this.$delete(this.obj, "age")
                // this.$set(this.arr, 3, "点击我才能出现哦")
            },
        },
    });
</script>