1-6 列表与事件

数据更新检测：

变异方法：引起视图更新

以push为例：

<template>
    <!--在template，只能存在一个根组件-->
    <div class="event">
        <ul>
            <li v-for="name in names">{{name}}</li>
        </ul>
        <button v-on:click="pushArr">按钮</button>
    </div>
</template>
<script>
export default {
    //data中数据改变，会引起视图的改变MVVM
  data(){
      return{
          names:["iwen","ime","ice"]
      }
  },
  methods:{
      pushArr(){
         this.names.push("frack");
      }
    
  }
}
</script>
<style>

</style>

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push() 往数组最后面添加一个元素，成功返回数组的长度
pop() 删除数组的最后一个元素，成功返回删除元素的值
shift() 删除数组的第一个元素，成功返回删除元素的值
unshift() 往数组最前面添加一个元素，成功返回当前数组的长度
splice() 有三个参数，第一个是想要的删除的元素的下标(必选)，第二个是想要的删除的个数(必选)。第三个是在被删除的位置添加数组新成员,无论何时，
使用该方法删除元素时注意数组长度有变化，bug可能就是因为它
sort() 将数组按照字符编码默认从小到大排序，成功返回排序后的数组
reverse()将数组倒序，成功返回倒序后的数组

splice案例：

<template>
    <!--在template，只能存在一个根组件-->
    <div class="event">
        <ul>
            <li v-for="name in names">{{name}}</li>
        </ul>
        <button v-on:click="pushArr">按钮</button>
    </div>
</template>
<script>
export default {
    //data中数据改变，会引起视图的改变MVVM
  data(){
      return{
          names:["c","b","a"]
      }
  },
  methods:{
      pushArr(){
         this.names.splice(2,1,"f");
      }
  }
}
</script>
<style>

</style>

效果图：

替换数组：不会引起视图更新

filter()

concat()

slice()

这些不会改变原始数组

显示过滤/排序结果

有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。在这种情况下，可以创建返回过滤或排序数组的计算属性。

例如：

<template>
    <div class="event">
       
        <button v-on:click="getOdd">我要奇数</button>
    </div>
</template>
<script>
export default {
  data(){
      return{
          nums:[1,2,3,4,5,6,7]
      }
  },
  methods:{
      getOdd(){
          this.nums.filter(function(num){//filter进行过滤
              if (num%2!==0) {
                  console.log(num)
              }
          })
      }
  }
}
</script>
<style>

</style>

当点击按钮的时候控制台会打印奇数

显示过滤/排序结果

猜你喜欢