孩子长大了!!!
本来想跟以前一样看教程视频,发现有点无聊,然后就看起了文档
v-for
1. 可以遍历对象:
官网链接
value为值,name为键,index为索引,按顺序写
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
<script>
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
<script>
结果:
0.title:How to do lists in Vue
1.author: Jane Doe
2.publishedAt:2016-04-10
2. 对data数组增删改查
<script>
new Vue({
el: '#v-for-object',
data: {
arrList:[{
name: 'kiki',
age:15
},{
name: 'mimi',
age:15
},{
name: 'xixi',
age:15
},{
name: 'lili',
age:15
}]
}
})
<script>
需求:修改第一个的 name为‘阿晴’,age为18
maybe是这样改的:
- 方式一:(可以实现)
this.arrList[0].name = '阿晴' this.arrList[0].age = 18
- 方式二:(界面没有反应,控制台数据已经被修改)
失败原因?this.arrList[0] = { name: '阿晴', age: 18 }
界面数据会跟随数据的改变是因为数据已经被双向绑定,而this.arrList[0]并没有被绑定,所以即使修改了视图也不会进行修改
如何解决? - 方法一:
this.arrList.splice(0,1,{
name: '阿晴',
age: 18
}
)
- 方法二:
Vue.set(this.arrList, 0, { name: '阿晴', age: 18 } )
- 方法三
this.$set(this.arrList, 0, { name: '阿晴', age: 18 } )
2. 数组修改后重新赋值并不会极大消耗性能
官网链接
这个在之前困扰了我好久,居然在这里看到了~
3. v-if和v-for不能一起用的解决方法:
为什么不能一起用?
我反复看了官网,再去看看别的文章的解析,根据我的理解做出了解读,不知是否正确:
v-for会走一遍逻辑,走完了v-if也会走一段逻辑,如果用在同个元素上,它就会重复的去走这个逻辑
有些文章可能是比较早写(vue3出之前)的,并没有提到vue3在v-for和v-if的优先级上的改变,上面的两个官网截图可以看出
优先级:
vue2:v-for > v-if
- 这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时,这种优先级的机制会十分有用
vue3:v-if > v-for
- 这意味着 v-if 将没有权限访问 v-for 里的变量
为什么要这么改?
一开始有点不理解v-if没有权限访问v-for的变量是什么意思,看到了篇文章:
所以说,尽管vue2的优先级设计有他的作用,但是为了性能,vue3中选择放弃原来的功能,通过提高v-if的优先级直接杜绝了这个事情的发生
,直接不让渲染:
!!!vue3中会报错!!!
<li v-for="item in arr" v-if="!item.done" :key="item.id">
<span>{{item.task}}</span>
</li>
那要怎么解决?
之前看到的文章都是说,在渲染之前将数据处理好,再循环;
脑瓜子不太灵光,一直觉得,这也太麻烦了吧。。。
直到我看到了!!v-for可以用计算属性
处理数据?好像??可以解决先解决后渲染的问题?
点了点v-if和v-for的官网介绍,发现官网也是推荐的用计算属性的方法!!
.passive 和 .prevent事件修饰符
- 二者不能一起用,.prevent会被掩盖
- passive:恢复被阻止的默认行为
- prevent:阻止默认行为,比如说a标签的点击跳转行为、form提交后会重载页面
好吧写不动了先这样~