「这是我参与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
有更高的初始渲染开销。