Vue 循环遍历 v-for
v-for遍历数组
- 渲染一组数据的时候用 v-for
- v-for的语法类似于JavaScript中的for循环
- 格式如下:item in items的形式
我们来看一个简单的案例:
如果在遍历的过程中不需要使用索引值
- v-for="movie in movies"
- 依次从movies中取出movie,并且在元素的内容中,我们可以使用Mustache语法,来使用movie
如果在遍历的过程中,我们需要拿到元素在数组中的索引值呢?
- 语法格式:v-for=(item, index) in items
- 其中的index就代表了取出的item在原数组的索引值。
v-for可以用户遍历对象:
- 比如某个对象中存储着你的个人信息,我们希望以列表的形式显示出来。
<div id="app">
<ul>
<li v-for="(value, key, index) in info">
{{index}}-{{value}}-{{key}}
</li>
</ul>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
info: {
name: 'why',
age: 18,
height: 1.88
}
}
})
</script>
Array: (item,index) in Array
- item 是数组的遍历
- index 是数组的索引
- 可以用其它的参数代替,但是在后面也得写成一样的参数,尽量避免命名的冲突
更改数组
- 不能通过索引的方式更改数组,这样不会渲染页面
- 不能通过更改长度的方式更改数组,也不会渲染页面
检测数组更新
-
因为Vue是响应式的,所以当数据发生变化时,Vue会自动检测数据变化,视图会发生对应的更新。
-
Vue中包含了一组观察数组编译的方法,使用它们改变数组也会触发视图的更新。
-
push()
-
pop()
-
shift()
-
unshift()
-
splice()
-
sort()
-
reverse()
obj: (value,key,index) in obj
- value 对象的 value 值
- key 对象的 key 值
- index 对象的索引
更改对象
- 向对象内添加或者删除属性不会渲染页面
- 使用$set()方法
- 语法
this.$set(obj, key, value)
- obj: 需要修改的对象
- key: 对象的key值
- value: 想添加或者修改的值
- 将 key 值改成索引也客园修改数组
- 语法
- Object.defineProperty
num:num is number
从 1 开始遍历到这个数字
String
遍历字符串的全部字母
key属性
- 只能用在Array和string中,值是唯一的
- vue不会去改变原有的元素和数据,而是创建新的元素然后把新的数据渲染进去
- 在使用v-for的时候,vue里面需要我们给元素添加一个key属性,这个key属性必须是唯一的标识
- 给key赋值的内容不能是可变的,可以用索引添加
- 在写v-for的时候,都需要给元素加上一个key属性
- key的主要作用就是用来提高渲染性能的!
- key属性可以避免数据混乱的情况出现 (如果元素中包含了有临时数据的元素,如果不用key就会产生数据混乱)
注意,千万不要将 v-for 和 v-if 一起使用。
<div v-for='item in datas' v-if='isShow'></div>
- v-for 的优先级始终比 v-if 高,无论先后顺序。
- 所以两个指令同时存在时总是先生成迭代逻辑,再在迭代逻辑中进行genIf的处理,最后在整个迭代里每项都进行一次判断,对性能造成浪费。
- 将v-if提取到v-for之外,如果判断参数出现在迭代数据项里,可以结合computed来过滤迭代项后再进行渲染。
本文来自博客园,作者:懒惰ing,转载请注明原文链接:https://www.cnblogs.com/landuo629/p/12409597.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器