样式的使用、内联样式、v-for和key属性、v-if和v-show

样式的使用

export default {
  name: "indexPage",
  data(){
    return{
      class1:'box',
      class2:['box'],
      flag:true,
      class3:{'box':'true'},
      class4:[{'box':'true'},{'fs40':'flase'}]
    }
  }
}

<div id="styles">
  <div class="box fs40">boxboxbox</div>
<!--  1、数组-->
<!--  <div :class="class1">fsfsfs</div>-->
  <div :class="class2">eseses</div>
<!--  2、三目表达式-->
  <div :class="flag?'box':'fs40'">11111</div>
<!--  3、对象 {‘类名’:'布尔类型的值'}-->
  <div :class="class3">2222</div>
<!--  4、数组内置对象-->
  <div :class="class4">3333</div>
</div>

内联样式

export default {
  name: "inlineStyle",
  data(){
    return{
      style1:{'font-size':'30px'},
      style2:{'color':'red'},
      getColor(n){
        if(n == 1){
          return {'color':'red'}
        }else if(n == 2){
          return {'color':'pink'}
        }
      }
    }
  }
}

<div id="inline">
  <div style="font-size:30px">111</div>
  <div :style="{'font--size':'30px'}">222</div>
<!--  1、对象-->
  <div :style="style1">333</div>
<!--  2、数组-->
  <div :style="[style1,style2]">style</div>
<!--  3、函数返回值-->
  <div :style="getColor(n=1)">0000</div>
  <div :style="getColor(n=2)">999999</div>
</div>

v-for和key属性

export default {
  name: "vforKey",
  data(){
    return{
      obj:{
        name:'zs',
        age:18
      }
    }
  }
}

<div id="forkey">
<!--  1、遍历数字-->
  <div v-for="num in 10" :key="num">{{num}}</div>
<!--  2、遍历对象-->
  <div v-for="(item,index) in obj" :key="index"></div>
<!--
v-for必须搭配key属性使用：
  要求：必须是数字或者字符串，
       必须是唯一值
  作用：提高重排效率  就地复用
-->
</div>

v-if和v-show

export default {
  name: "ifShow",
  data(){
    return{
      flag:true
    }
  }
}

<div id="ifShow">
    <div v-if="flag">1</div>
    <div v-show="flag">2</div>
  </div>

v-if和v-show的区别：
相同点：显示和隐藏元素
不同点：v-if删除DOM元素，v-show是通过display:none;，进行隐藏
应用场景：只修改一次的时候可以使用v-if,频繁切换的时候可以使用v-show