Vue学习从入门到精通（三）

这一篇文章主要说一下Vue对数组的各种操作。在说Vue之前，我们先了解一下javascript中对数组操作的常见函数。

函数	说明
push()	在数组的末尾添加一个新的元素
pop()	在数组的末尾删除掉一个元素
shift()	删除数组的第一个元素
unshift()	插入一个元素作为数组的第一个元素
splice()	功能比较强大，可以实现插入，删除，替换等操作。
sort()	对字符串，字符，数字有效果，主要是按照ascii码升序排序，别的类型的元素，不支持，不过我们可以重写该方法进行相关的排序操作,该操作会改变原来的数组
reverse()	对字符串，字符，数字有效果，主要是按照ascii码降序排序，别的类型的元素，不支持，不过我们可以重写该方法进行相关的排序操作，该操作会改变原来的数组

splice用法灵活多变，这里重点说一下。语法如下：

arrayObject.splice(index,howmany,item1,.....,itemX)

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置
how many	必需。要删除的项目数量。如果设置为 0，则不会删除项目
item1,…,itemx	可选。向数组添加的新项目

此处参考：http://www.w3school.com.cn/jsref/jsref_splice.asp

Vue对这些方法进行了重写，每次对使用这些方法对数组进行操作后，就会触发视图的刷新。验证代码如下：

<template>
  <div class="hello">
    <button @click="addItem">增加</button>
    <button @click="deleteItem">删除</button>
    <button @click="shiftOperation">shift操作</button>
    <button @click="unshiftOperation">unshift操作</button>
    <button @click="spliceOperation">splice操作</button>
    <button @click="sortOperaton">sort操作</button>
    <ul>
      <li v-for="user in list">
        <span>{{user.nickName}}</span>**
        <span>{{user.age}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        list: [
          {nickName: '张三', age: 50},
          {nickName: '李四', age: 20},
          {nickName: '王五', age: 5},
          {nickName: '赵六', age: 45}
        ]
      }
    },
    methods: {
      addItem () {
        // 这里对数据进行操作
        this.list.push({nickName: '老头', age: 90})
      },
      deleteItem (){
        this.list.pop()
      },
      shiftOperation (){
        this.list.shift()
      },
      unshiftOperation (){
        this.list.unshift({nickName: '路人', age: 30})
      },
      spliceOperation (){
        this.list.splice(2, 1, {nickName: '帅哥', age: 45})
      },
      sortOperaton (){
        this.list.sort(function(a, b){
       var age1 =a.age;
       var age2 = b.age;
        return age1 -age2;
        })
      }

    }
  }</script>
<style scoped>h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin: 0 10px;
}

a {
  color: #42b983;
}

.top {
  margin: auto;
  width: 200px;
  height: 100px;
  background: #f56868;
}</style>

本来想给大家录gif的，但是好像录不上，大家感兴趣的话，可以自己验证下哦。
但是呢由于javaScript的限制，Vue.js不能检测到下面数组的变化。

直接使用索引设置元素，如vm.items[0] = {}
修改数据的长度，如vm.items.length = 0

针对这种情况，Vue.js中可以使用set(),和remove()这两个函数，具体操作如下：

this.list.set(1,item)

this.list.remove(item)

其中item分别为要替换和，要移除的元素。

Vue学习从入门到精通（三）

猜你喜欢