浅析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操作JSON实例代码
Feb 09 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
Vue实现双向数据绑定
May 03 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
Vue多环境代理配置方法思路详解
Jun 21 Javascript
详解Vue 换肤方案验证
Aug 28 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 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小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
基于PHP Socket配置以及实例的详细介绍
2013/06/13 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
PHP分页效率终结版(推荐)
2013/07/01 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
常用简易JavaScript函数
2009/04/09 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
jQuery表单域选择器用法分析
2015/02/10 Javascript
jquery中val()方法是从最后一个选项往前读取的
2015/09/06 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
Python科学计算之Pandas详解
2017/01/15 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
Python发展简史 Python来历
2019/05/14 Python
python内存管理机制原理详解
2019/08/12 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
Bally美国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/18 全球购物
给幼儿园老师的表扬信
2014/01/19 职场文书
《北大荒的秋天》教学反思
2014/04/14 职场文书
化学工程专业求职信
2014/08/10 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
绿里奇迹观后感
2015/06/15 职场文书
小学生教师节广播稿
2015/08/19 职场文书
新入职员工工作总结
2015/10/15 职场文书
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python
MongoDB日志切割的三种方式总结
2021/09/15 MongoDB