Vue基础

一、v-if和v-show异同

• 相同点：显示和隐藏元素
• 不同点：v-show：display：none显示和隐藏元素
  v-if：通过删除DOM元素
• 应用场景：只修改一次的时候可以使用v-if
  频繁切换到时候可以使用v-show

二、v-for和key的属性

• key的作用：提高重排效率，就地复用（diff算法）
  注意点：必须是数字或者字符串，必须是唯一值
• v-for 必须搭配key使用

1、遍历数组

<div v-for="(item1,index1) in list" :key="item1">
            <!-- item 数组中的每一个元素  index：索引 -->
            {{item1}}=={{index1}}
        </div>
        <div v-for="item in list">
            <!-- items数组中的每一个元素 index:索引 -->
            {{item}}
        </div>

2、遍历对象

<div v-for="(value,key,index) in obj">
            {{value}}=={{key}}=={{index}}
        </div>

3、遍历数字

<div v-for="num in 5">
     <div>免费</div>
</div>