浅析vue.js数组的变异方法


Posted in Javascript onJune 30, 2018

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

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

都有什么功能?动手试验了一下:

<body>
  <div id="app">
   <div>
    push方法:
    <input type="text" v-model="text" @keyup.enter="methodByPush">
    <input type="button" value="测试功能" @click="methodByPush">
    <ul>
     <li v-for="item of items">
      <span v-text="item"></span>
     </li>
    </ul>
   </div>
    <div>
    pop方法:
    <input type="button" value="测试功能" @click="methodByPop">
    <ul>
     <li v-for="item of items">
      <span v-text="item"></span>
     </li>
    </ul>
   </div>
   <div>
    shift方法:
    <input type="button" value="测试功能" @click="methodByShift">
    <ul>
     <li v-for="item of items">
      <span v-text="item"></span>
     </li>
    </ul>
   </div>
    <div>
    unshift方法:
    <input type="text" v-model="text" @keyup.enter="methodByUnshift">
    <input type="button" value="测试功能" @click="methodByUnshift">
    <ul>
     <li v-for="item of items">
      <span v-text="item"></span>
     </li>
    </ul>
   </div>
   <div>
    splice方法:
    <input type="button" value="测试功能" @click="methodBySplice">
    <ul>
     <li v-for="item of items">
      <span v-text="item"></span>
     </li>
    </ul>
   </div>
   <div>
    sort方法:
    <input type="button" value="测试功能" @click="methodBySort">
    <ul>
     <li v-for="item of items">
      <span v-text="item"></span>
     </li>
    </ul>
   </div> 
   <div>
   reverse方法:
    <input type="button" value="测试功能" @click="methodByReverse">
    <ul>
     <li v-for="item of items">
      <span v-text="item"></span>
     </li>
    </ul>
   </div>
   result显示的地方:<br>
   <span v-text="result"></span>
  </div>
<script>
  var vm = new Vue({
   el: '#app',
   data: {
    items: [],
    text: '',
    result: ''
   },
   methods: {
    methodByPush: function () {
     this.result = this.items.push(this.text)
     this.text = ''
    },
    methodByPop: function () {
     this.result = ''
     this.result = this.items.pop()
    },
    methodByShift: function () {
     this.result = ''
     this.result = this.items.shift()
    },
    methodByUnshift: function () {
     this.result = ''
     this.result = this.items.unshift(this.text)
     this.text = ''
    },
    methodBySplice: function () {
     this.result = ''
     this.result = this.items.splice(2,1,'yovan')
    },
    methodBySort: function () {
     this.result = ''
     this.result = this.items.sort()
    },
    methodByReverse: function () {
     this.result = ''
     this.result = this.items.reverse()
     alert(this.result)
    }
   }
  })
</script>

得到下面的结论:

push() 往数组最后面添加一个元素,成功返回当前数组的长度

pop() 删除数组的最后一个元素,成功返回删除元素的值

shift() 删除数组的第一个元素,成功返回删除元素的值

unshift() 往数组最前面添加一个元素,成功返回当前数组的长度

splice() 有三个参数,第一个是想要删除的元素的下标(必选),第二个是想要删除的个数(必选),第三个是删除
后想要在原位置替换的值(可选)

sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组

reverse() 将数组倒序,成功返回倒序后的数组

后来发现这些应该都是javascript本来的方法吧?以前javascript没学好,正好趁这次把这些方法的用法都给捡回来!

Javascript 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
JavaScript 学习小结(适合新手参考)
Jul 30 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
Jun 01 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
Nov 09 Javascript
微信小程序request请求封装,验签代码实例
Dec 04 Javascript
Vue-cli3多页面配置详解
Mar 22 Javascript
详解vue添加删除元素的方法
Jun 30 #Javascript
vue.js删除列表中的一行
Jun 30 #Javascript
vue v-model动态生成详解
Jun 30 #Javascript
vue-router+nginx 非根路径配置方法
Jun 30 #Javascript
Vue项目中添加锁屏功能实现思路
Jun 29 #Javascript
angular6.0开发教程之如何安装angular6.0框架
Jun 29 #Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 #Javascript
You might like
php htmlentities()函数的定义和用法
2016/05/13 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
javascript window.opener的用法分析
2010/04/07 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
js和php如何获取当前url的内容
2013/09/22 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
Vue数据驱动模拟实现5
2017/01/13 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
ES6 中可以提升幸福度的小功能
2018/08/06 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
Python ellipsis 的用法详解
2020/11/20 Python
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
2014年小学植树节活动方案
2014/03/02 职场文书
优秀护士先进事迹
2014/05/08 职场文书
医院义诊活动总结
2014/07/04 职场文书
银行进社区活动总结
2014/07/07 职场文书
放飞理想演讲稿
2014/09/09 职场文书
2014年重阳节活动策划方案书
2014/09/16 职场文书
标准单位租车协议书
2014/09/23 职场文书
MySQL池化框架学习接池自定义
2022/07/23 MySQL