vue.js框架：数组的各种变异方法

今天阅读vue官网的学习教程，看到一个观察数组的变异方法。变异方法？？？excuse me??什么东西？？guide就给了这么一堆东西：

原来这些方法如下：

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

Vue 包含的这些方法，它们会主动触发视图的更新（即前端数据会自动更新）。

<!--HTML-->
<!--数组的各种变异方法-->
<div id="arrayChange">
<div> push方法：
<input type="text" v-model="text" @keyup.enter="methodByPush"> <input type="button" value="测试功能" @click="methodByPush">
</div>
<div> pop方法： <input type="button" value="测试功能" @click="methodByPop">
</div>
<div> shift方法： <input type="button" value="测试功能" @click="methodByShift">
</div>
<div> unshift方法： <input type="text" v-model="text" @keyup.enter="methodByUnshift"> <input type="button" value="测试功能" @click="methodByUnshift">
</div>
<div> splice方法： <input type="button" value="测试功能" @click="methodBySplice">
</div>
<div> sort方法： <input type="button" value="测试功能" @click="methodBySort">
</div>
<div> reverse方法： <input type="button" value="测试功能" @click="methodByReverse">
</div>
<div> 测试值： <ul> <li v-for="item of items"> <span v-text="item"></span> </li> </ul>
</div>
result显示的地方：<br> <span v-text="result"></span>
</div>

//JS代码
var vm = new Vue({el: '#arrayChange',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()}}
})

用法简介：

push() 往数组最后面添加一个元素，成功则返回当前数组的长度
    pop() 删除数组的最后一个元素，成功则返回删除元素的值
    shift() 删除数组的第一个元素，成功则返回删除元素的值
unshift() 往数组最前面添加一个元素，成功则返回当前数组的长度
splice() 有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除
                后想要在原位置替换的值（可选）
   sort() 使数组按照字符编码默认从小到大排序,成功则返回排序后的数组
reverse() 将数组倒序，成功则返回倒序后的数组

vue.js框架：数组的各种变异方法相关推荐

前端_快速入门Vue.js框架
文章目录快速入门Vue.js框架 0.前言 1.Vue.js框架 1.1.Vue简介 1.2.第一个Vue程序 1.3.el:挂载点 2.Vue指令 2.2.v-html 2.3.v-on 2.4. ...
Vue.js 框架基础笔记
Vue.js 框架基础笔记 1. Vue.js 基本概念 1.1 遇见 Vue.js 1.1.1 为什么要学习 Vue.js 1.1.2 前端开发的复杂化 1.1.3 Vue.js 特点 1.1.4 ...
js 获得明天0点时间戳_Python 3+Django 3 结合Vue.js框架构建前后端分离Web开发平台实战...
点击上方"测试开发技术",选择设为"设为星标" 优质文章,第一时间送达! 学习全文大概需要 12分钟,内容实战性较强. 1. 前言本篇将基于Python 3. ...
Vue.js框架简介（1）
1.Vue.js框架简介 Vue(读音 /vju:/,发音类似于 view)是一套用于构建用户界面的渐进式的JavaScript框架. 1.1.为什么要学习Vue.js 什么是Vue.js Vue.j ...
vue js 和原生app调用回调方法问题
vue js 和原生app调用回调方法问题 import Vue from 'vue' export default { name: 'list', components: { }, data: () ...
如何进行 Vue.js 框架的安装？
cmd如何进行 Vue.js 框架的安装? 步骤总结: 本地磁盘建立对应的空文件夹:举例:路径如C:\个人\vuejs\secondvue 电脑单击"开始",搜索程序**" ...
前端Vue.js框架是什么？有哪些特点？
前端Vue.js框架是什么?有哪些特点?Vue.js是一个前端框架,用于构建用户界面的渐进式框架.在Vue中一个核心的概念是让用户不再操作DOM元素解放了用户的双手,让程序员可以更多的时间去关注业务逻 ...
Vue.js 框架从入门到精通，只需要它！
点击蓝字关注我们你还在一行一行低效代码吗?你还在不停地操作 DOM 吗?你的代码还会频繁出现 CSS.Javascript 配置文件冲突吗? Vue3 框架快速解决你的代码低效问题! 01 Vue ...
从零吃透 Vue.js 框架，这里全部有！
点击蓝字关注我们你还在一行一行低效代码吗?你还在不停地操作 DOM 吗?你的代码还会频繁出现 CSS.Javascript 配置文件冲突吗? Vue3 框架快速解决你的代码低效问题! 01 Vue ...

vue.js框架：数组的各种变异方法

vue.js框架：数组的各种变异方法相关推荐

最新文章

热门文章