Vue样式绑定与条件渲染详

一、Vue样式绑定

在Vue中，我们可以通过多种方式动态地绑定样式，让界面根据数据状态变化而自动更新样式。

1. class样式绑定

(1) 字符串写法

适用场景：样式的类名不确定，需要动态指定

解析：

• 通过v-bind:class(可简写为:class)绑定一个字符串变量

• 点击div时，changeStyle方法会切换styleDyn的值

• 样式会在'normal'和'active'之间切换

(2) 数组写法

适用场景：要绑定的样式的个数不确定，名字也不确定

解析：

• 通过数组可以动态添加/移除多个class

• 点击按钮可以动态修改数组内容，从而改变应用的样式

(3) 对象写法

适用场景：要绑定的样式的个数确定，名字也确定，但要动态决定是否使用

解析：

• 对象写法的键是class名，值是布尔值，决定是否应用该class

• 可以通过修改对象的属性值来动态切换样式

2. 内联样式绑定

(1) 对象写法

解析：

• 样式属性名需要使用驼峰命名法（如fontSize而不是font-size）

• 可以动态修改样式对象的属性值来改变元素样式

(2) 数组写法

解析：

• 数组中可以包含多个样式对象，它们会被合并后应用到元素上

• 适用于需要组合多个样式对象的场景

二、条件渲染

Vue提供了两种条件渲染的方式：v-if和v-show

1. v-if 系列指令

特点：

• v-if是真正的条件渲染，元素会被完全销毁和重建

• v-if是惰性的，初始条件为假时什么也不做，直到条件变为真才会渲染

• v-if可以和v-else-if、v-else一起使用，但必须保持结构连续

• 使用key可以管理可复用的元素，避免Vue高效复用元素带来的问题

2. v-show 指令

特点：

• v-show只是简单地切换元素的displayCSS属性

• 无论初始条件如何，元素始终会被渲染并保留在DOM中

• v-show不支持