vue的v-for和key使用

vue中的v-if、v-show、v-for和key、样式的使用，和内联样式的使用

不多说了，都在代码里

<script>
export default {
  name: "VueDay02",
  data() {
    return {
      flag: true,
      class1: 'box',
      // 数组多类名
      class2: ['box', 'fs40'],
      // 这里为什么都是true
      class4: [
        {
          'box': false,
        },
        {
          'box': true,
          'fs40': true,
        },
      ],

      style1: {
        fontSize: '30px',
      },
      style2: {
        color: 'red',
      },
      list:[1,23,4,4,3,23,4,32]
    }
  },
  methods: {
    getColor(n) {
      if (n === 1) {
        return {color: "red"}
      } else if (n === 2) {
        return {color: "green"}
      }
    }
  }

}
</script>

<template>
  <div>

    <div class="box fs40">fs40fs40</div>
    <div :class="class1"> fs40fs40</div>
    <!--  数组-->
    <div :class="class2"> fs40fs40</div>
    <!--  三目表达式  -->
    <div :class="flag?'box':'fs40'"> fs40fs40</div>
    <!--  对象  也可以式变量-->
    <div :class="{'box':true,'fs40':false}">对象</div>
    <!--    数组内置对象-->
    <div :class="class4">数组内置对象</div>

    <!-- 内联样式   -->
    <div :style="style1">内联样式</div>
    <!--    数组-->
    <div :style="[style1,style2]">内敛样式</div>
    <!--  函数返回值-->
    <div :style="getColor(1)">内敛样式</div>
    <div :style="getColor(2)">内敛样式</div>


    <!--    v-for和key
            v-for 必须搭配key使用
            key必须式数字或字符串，必须是唯一值
            作用：提高重排效率，就地复用 （diff算法）
     -->
    <!--     遍历数字，数组，对象 -->
    <div v-for="num in 10" :key="num">{{num}}</div>
    <div v-for="(item,index) in list" :key="index">{{item}}</div>
    <div v-for="(value,key,index) in style1" :key="key">{{value }}=={{index}}</div>


<!--      v-if和v-show
          相同点：显示和隐藏元素
          不同点：v-if是删除dow元素，v-show是通过display:none;
          应用场景:只修改一次使用v-if，频繁切换的时候用v-show
-->
    <div v-if="true">1</div>
    <div v-show="false">2</div>

  </div>
</template>

<style scoped lang="less">
.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

.fs40 {
  font-size: 40px;
}
</style>