本文标识 : V00005
本文编辑 : Jack 风
编程工具 : Vscode
阅读时长 : 5分钟
Vue 之v-for 解析
那么在学习v-for 语法之前，我们先来了解一下,vue是怎么绑定数据的，数据绑定最常见的形式就是使用"Mustache" (双大括号)的文本插值。
在学习v-for语句之前，先了解一下
vue是怎么数据绑定
的数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<span>Message: {{ msg }}</span>
Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：
<span v-once>这个将不会改变: {{ msg }}</span>
V-for 循环每一项
演示数据
data: {
list: [1, 2, 3, 4, 5, 6, 7, 8],
list1: [
{ id: 1, name: '小1' },
{ id: 2, name: '小2' },
{ id: 3, name: '小3' },
{ id: 4, name: '小4' },
{ id: 5, name: '小5' },
{ id: 6, name: '小6' },
list2: [
{ id: 1, name: '欢迎' },
{ id: 2, name: '关注' },
{ id: 3, name: '公号' },
{ id: 4, name: 'A2Data' },
user : {
id:1,
name: "A2Data",
category: '数据'
},
1、循环List数组
前边是循环的每一项，List为数组
<p v-for=" item in list">{{item}}</p>
循环普通数组，然后展示索引值
<p v-for="(item,i) in list">索引值：{{i}} --- 每一项 {{item}} </p>
循环List1
<p v-for=" user in list1"> Id: {{ user.id}} == 名字：{{user.name}} </p>
加上索引
<p v-for=" (user,i) in list1"> Id: {{ user.id}} == 名字：{{user.name}} 索引为:{{i}} </p>
2、循环对象
每个属性 拿到属性值，每个对象都是键值对组成的
<p v-for="(val,key) in user" >值是 {{val}} -- 键是 {{key}} </p>
注意：在遍历对象身上的键值对的时候，除了有 val key ，在第三个位置还有一个
索引
<p v-for="(val,key,index) in user" >值是 {{val}} -- 键是 {{key}} -- 索引是 {{index}} </p>
3、迭代数字
这里主要是解决
Key
变动的问题，每一个对象对应一个Key
A、v-for 循环的时候，Key 只能使用number 获取string
B、key在使用的时候，必须使用 v-bind属性绑定的形式，指定key的值
Kye 保证 数据的唯一性
*那么在组件中，一旦使用v-for 循环的时候，或者在一些特殊情况中，如果v-for有问题的话，必须在使用V-for的同时呢，制定唯一的字符串/数字类型的
:key值
*
So，
多写点也没问题，不写可能会出问题的哦
<p v-for="item in list" key="item.id">
<input type="checkbox" name="" id="">
{{item.id}} ---- {{item.name}}
V-if & V-Show的特点
v-if
的特点：每次都会重新删除或创建元素
v-show
的特点：每次不会重新进行DOM 的删除和创建操作，只是切换了元素的
display：none
样式
<h3 v-if="flag">这是用 v-if 控制的元素</h3>
<h3 v-show="flag">这是用 v-show 控制的元素</h3>
区别
V-if
有较高的切换性能消耗
V-show
有较高的初始渲染消耗
假设元素设计到频繁的切换，最好不要使用 v-if，而是推荐使用 v-show
假设元素可能永远也不会被显示出来让用户看到，则推荐使用 v-if
具体案例请看次条哦
期待一起成长
