浅析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 相关文章推荐
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
微信小程序 下拉菜单简单实例
Apr 13 Javascript
JavaScript简单实现合并两个Json对象的方法示例
Oct 16 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
原生javascript如何实现共享onload事件
Jul 03 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 access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
php实现通过soap调用.Net的WebService asmx文件
2017/02/27 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
jQuery中live()方法用法实例
2015/01/19 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
python中的对象拷贝示例 python引用传递
2014/01/23 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
python运行其他程序的实现方法
2017/07/14 Python
Python中矩阵创建和矩阵运算方法
2018/08/04 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
对python制作自己的数据集实例讲解
2018/12/12 Python
python实现日志按天分割
2019/07/22 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
摄影专业毕业生求职信
2014/08/05 职场文书
感谢信的格式
2015/01/21 职场文书
统计员岗位职责范本
2015/04/14 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python