Vue 学习笔记 —— 绑定样式与条件渲染（四）

「这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战」。

1. 绑定样式

1. class样式

1. 字符串写法

适用于样式的类名不确定，需要动态指定。

<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
复制代码

data: {
    mood: 'normal',
}
复制代码

2. 数组写法

<div class="basic" :class="classArr">{{name}}</div>
复制代码

data: {
    classArr: ['color1', 'color2', 'color3']
}
复制代码

3. 对象写法

<div class="basic" :class="classObj">{{name}}</div>
复制代码

data: {
    classObj: {
        color1: false,
        color2: false
    }
},
复制代码

2. 内联样式

1. 对象写法

<div class="basic" :style="styleObj">{{name}}</div>
复制代码

data: {
    styleObj: {
        fontSize: '40px',
        color: 'red'
    },
    styleObj2: {
        backgroundColor: 'orange'
    }
}
复制代码

2. 数组写法

<div class="basic" :style="styleArr">{{name}}</div>
复制代码

data: {
    styleArr: [
        {
            fontSize: '40px',
            color: 'blue'
        },
        {
            backgroundColor: 'gray'
        }
    ]
}
复制代码

2. 条件渲染

1. v-if

v-if指令用于条件性地渲染一块内容，当指令表达式的返回值为true时才被渲染：

<h2 v-if="n === 1">1</h2>
复制代码

同样，表达式也能获取到data中的数据。

也可以用v-else添加一个else块：

<h2 v-if="n === 1">1</h2>
<h2 v-else>2</h2>
复制代码

也可以使用v-else-if：

<div v-if="n === 1">111</div>
<div v-else-if="n === 2">222</div>
<div v-else-if="n === 3">333</div>
<div v-else>other</div>
复制代码

如果想切换多个元素，可以把一个<template>元素当做不可见的包裹元素，并在上面使用v-if、v-else-if、或v-else，最终的渲染结果将不包含<template>元素：

<template v-if="ok">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
</template>
复制代码

2. 使用key管理可复用元素

若使用v-if切换要渲染的元素时，两部分有相同的元素，那么 Vue 会复用他们，不会重新渲染：

<template v-if="loginType === 'username'">
    <input placeholder="Enter your username" />
</template>
<template v-else>
    <input placeholder="Enter your email address" />
</template>
复制代码

若不想要 Vue 复用他们的话，只需添加一个具有唯一值的key属性即可：

<template v-if="loginType === 'username'">
    <input placeholder="Enter your username" key="username-input" />
</template>
<template v-else>
    <input placeholder="Enter your email address" key="email-input" />
</template>
复制代码

3. v-show

v-show指令也可用于根据条件展示元素：

<h1 v-show="ok">Hello!</h1>
复制代码

不同的是带有v-show的元素始终会被渲染并保留在 DOM 中。v-show只是简单地添加display:none到元素上。

• v-if：真正的条件渲染，DOM节点消失
• v-show：只是加了display：none
• template只在v-if有效

4. v-if与v-show对比

• v-if是真正的渲染，它会使组件被销毁和重建
• v-if是惰性的，当指令表达式为true时，才会开始渲染元素
• 而v-show不管初始条件是什么，都会渲染元素，并且只是简单的 CSS 切换。

总结，v-if有更高的切换开销，而v-show有更高的初始渲染开销。