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

原创已于 2022-08-18 21:02:43 修改 · 1.1k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-08-14 15:53:43 首次发布

19 篇文章

订阅专栏

本文介绍了Vue.js中的关键概念，包括动态绑定样式、条件渲染、列表渲染及虚拟DOM优化技巧。

1.class样式：

1-1.写法：:class=“xxx” xxx 可以是字符串、对象、数组。
- ①字符串写法适合于：类名不确定，要动态获取。借助一个变量存储的字符串来控制样式名即可
- ②对象写法适用于：绑定多个样式，个数确定，名字也确定，但不确定用不用。借助一个变量存储的对象属性来控制样式名即可
- ③数组写法使用于：要绑定多个样式，个数不确定，名字也不确定。

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    'active': true,
    'text-danger': false
  }
}

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

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

<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

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元素不会被移除，仅仅是样式的隐藏。

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。