Vue列表渲染-变异方法
2024-08-23 14:50:48
Vue 包含一组观察数组的变异方法,变异方法 (mutation method),顾名思义,会改变被这些方法调用的原始数组
所以它们也将会触发视图更新。这些方法如下:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
你打开控制台,然后用前面例子的 items
数组调用变异方法:example1.items.push({ message: 'Baz' })
。
这些方法是不是很熟悉,这些都是原生js数组的方法,会专门写篇博客回顾这些方法这里就看实例吧
<div id="example">
<div>
<button @click="push()">push</button>
<button @click="pop()">pop</button>
<button @click="shift()">shift</button>
<button @click="unshift()">unshift</button>
<button @click="splice()">splice</button>
<button @click="sort()">sort</button>
<button @click="reverse()">reverse</button>
</div>
<ul>
<li v-for="item in items">
{{item.message}}
</li> </ul>
</div>
<script>
var example = new Vue({
el:"#example",
data:{ items:[
{message:5},
{message:2},
{message:7}
],
addValue:{message:5},
addSplice:{message:'Thank'},
},
methods:{
push(){
this.items.push(this.addValue) //末尾添加
},
pop(){
this.items.pop() // 末尾删除
},
shift(){
this.items.shift() // 开头删除
},
unshift(){
this.items.unshift(this.addValue) //开头添加
},
splice(){
this.items.splice(1,0,this.addSplice); // 从第二个位置添加一个Thank
},
sort(){
this.items.sort(function(a, b){
return a.message < b.message; // 比较大小
});
},
reverse(){
this.items.reverse() // 反转数组
}, } })
</script>
变异方法
push() 接收任意数量的参数,把它们逐个添加到数组末尾,并返回修改后数组的长度
pop() 从数组末尾移除最后一项,减少数组的length值,然后返回移除的项
shift() 移除数组中的第一个项并返回该项,同时数组的长度减1
unshift() 在数组前端添加任意个项并返回新数组长度
splice() 删除原数组的一部分成员,并可以在被删除的位置添加入新的数组成员
sort() 调用每个数组项的toString()方法,然后比较得到的字符串排序,返回经过排序之后的数组
reverse() 用于反转数组的顺序,返回经过排序之后的数组
最新文章
- iOS-----正则表达式
- Android成长日记-Fragment
- uva 10673 Play with Floor and Ceil
- ASP.NET MVC 中的ViewData与ViewBag
- div a 和 div >; a 的区别———后者指作用到div下一级的 a 标签 ,仅一级
- WebSocket 实战
- Cassandra1.2文档学习(1)——Cassandra基本说明
- UVa 1585 - Score
- jQuery中操作Ajax方法小结
- python+unittest框架整理(一点点学习前辈们的封装思路,一点点成长。。。)
- mysql怎样配置ODBC数据源
- 从n个数中随机选出k个数,并判断和是不是素数
- [转]如何在Angular4中引入jquery
- (5)学习笔记 ) ASP.NET CORE微服务 Micro-Service ---- 熔断降级(Polly)
- Redux 入门教程(二):中间件与异步操作
- 转 U-BOOT之stage1
- 【工具相关】Web-ionic-npm的安装
- UOJ33 [UR #2] 树上GCD 【点分治】【容斥原理】【分块】
- C#并行编程(2):.NET线程池
- 转: Xshell鼠标选中,终端立即中断(CTRL-C)的问题
热门文章
- php strchr()函数 语法
- [luogu]P1133 教主的花园[DP]
- windows下使用Ant编译Android项目
- Java 设计模式之 策略模式
- VS2015发布web服务
- p5414 [YNOI2019]排序
- JS-闭包(Closures)和let声明块级作用域变量
- git如何撤销工作区的修改
- 常见的网络设备:集线器 hub、网桥、交换机 switch、路由器 router、网关 gateway
- <; 利用Python进行数据分析 - 第2版 >; 第五章 pandas入门 读书笔记