黑马程序员技术交流社区

标题: 【上海校区】Vue学习从入门到精通（三） [打印本页]

---

作者: 不二晨    时间: 2018-8-15 09:36
标题: 【上海校区】Vue学习从入门到精通（三）

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

函数

说明

push()

在数组的末尾添加一个新的元素

pop()

在数组的末尾删除掉一个元素

shift()

删除数组的第一个元素

unshift()

插入一个元素作为数组的第一个元素

splice()

功能比较强大，可以实现插入，删除，替换等操作。

sort()

对字符串，字符，数字有效果，主要是按照ascii码升序排序，别的类型的元素，不支持，不过我们可以重写该方法进行相关的排序操作,该操作会改变原来的数组

reverse()

对字符串，字符，数字有效果，主要是按照ascii码降序排序，别的类型的元素，不支持，不过我们可以重写该方法进行相关的排序操作，该操作会改变原来的数组

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

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

• 1
  

参数

描述

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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
  

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

• 直接使用索引设置元素，如vm.items[0] = {}

• 修改数据的长度，如vm.items.length = 0

  
  

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

this.list.set(1,item)

• 1
  

this.list.remove(item)

• 1
  

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

【转载】https://blog.csdn.net/hanhailong18/article/details/81542417

---

作者: 梦缠绕的时候    时间: 2018-8-16 16:11

---

作者: 不二晨    时间: 2018-8-16 17:15
奈斯

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2