7.vue 中样式绑定与指令 v-if、v-show、v-for。

1.class样式：

• 1-1.写法：:class=“xxx” xxx 可以是字符串、对象、数组。

  • ①字符串写法适合于：类名不确定，要动态获取。借助一个变量存储的字符串来控制样式名即可

  • ②对象写法适用于：绑定多个样式，个数确定，名字也确定，但不确定用不用。借助一个变量存储的对象属性来控制样式名即可

  • ③数组写法使用于：要绑定多个样式，个数不确定，名字也不确定。

data: {
  classObject: {
    'active': true,
    'text-danger': false
  }
}

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

• 1-2.style样式：
  • ①:style="{ fonSize: xxx }"其中 xxx 是动态值。
  • ②:style=“{ a, b }” 其中a、b是样式对象，即键是样式属性，值是样式属性值构成的对象。

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

2.条件渲染：

• 2-1.v-if:
  • ①写法：
    α：v-if=“表达式”
    β：v-else-if=“表达式”
    γ：v-else=“表达式”
  • ②适用于切换频率较低的场景。
  • ③不展示的dom元素直接被移除。即多次切换后DOM元素不再存在。
  • ④v-if、 v-else-if、 v-else一起使用，但要求结构不能被"打断"。
  • ⑤使用用作v-if的容器不会影响实际dom的结构。
• 2-2.v-show：
  • ①写法：v-show=“表达式”
  • ②适用于：切换频率较高的场景。
  • ③特点：不展示的dom元素不会被移除，仅仅是样式的隐藏。

3.v-for指令：

• 3-1.用于展示列表数据。
• 3-2.语法：v-for=“(item index) in xxx” :key=“yyy”
• 3-3.可遍历：数组Array、对象Object、字符串string(用的很少)、指定次数(用的很少)数字number、Iterable。

4.v-for中的key的作用。

• 4-1.虚拟DOM中key的作用：key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较，比较规则如下：

  • ①旧虚拟DOM中找到了与新虚拟DOM相同的key：
    • α：若虚拟DOM中内容没变，直接使用之前的真实DOM。
    • β：若虚拟DOM中内容变了，则生成新的虚拟DOM替换掉页面中的真实DOM。
  • ②旧虚拟DOM中未找到与新虚拟DOM相同的key。
    • α：创建新的真实DOM，随后渲染到页面。

• 4-2.用index作为key可能引发的问题：若不写key属性，默认绑定的是index。

  • ①若对数据进行：逆序添加、逆序删除等破坏顺序操作：
    • α：会产生没有必要的真实DOM更新。
    • β：如果结构中还包含输入类的DOM：会产生错误DOM更新，界面异常。

• 4-3.开发中应该以每条数据唯一标识作为key。