浅析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事件热键兼容ie|firefox
Dec 30 Javascript
禁止按回车键提交表单的方法
Jun 11 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
如何动态加载外部Javascript文件
Dec 02 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
详解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的超级变量$_POST获取HTML表单(HTML Form) 数据
2011/05/07 PHP
redis 队列操作的例子(php)
2012/04/12 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
php实现的http请求封装示例
2016/11/08 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
Jquery表单验证失败后不提交的解决方法
2016/10/18 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
2017/05/24 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
Angularjs中的$apply及优化使用详解
2018/07/02 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
在Python中使用判断语句和循环的教程
2015/04/25 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
python读取xml文件方法解析
2020/08/04 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
一款html5 canvas实现的图片玻璃碎片特效
2014/09/11 HTML / CSS
电视购物广告词
2014/03/19 职场文书
村创先争优活动总结
2014/08/28 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle