Vue.js 的指令(Directives)是带有 v- 前缀的特殊特性。指令可以赋予 DOM 元素不同的行为。
Vue.js 内置了许多常用的指令,例如:
- v-if:条件渲染指令,根据值的真假来决定是否渲染元素
- v-else:v-if 的else 块
- v-show:根据表达式之真假值,切换元素的 display CSS 属性
- v-for:循环渲染指令
- v-on:监听 DOM 事件指令
- v-bind:动态绑定属性
- v-model:双向数据绑定
其中 v-if 是最常用的条件渲染指令。它根据表达式的真假来条件渲染元素。
使用方式:
<h1 v-if="seen">Hello</h1>new Vue({
el: '#app',
data: {
seen: true
}
})这里 seen 的值如果为 true,则渲染;如果为 false,则什么也不渲染。
v-if 也可以搭配 v-else 使用:
<div v-if="seen"> Seen </div>
<div v-else> Not seen </div>以及 v-else-if:
<div v-if="seen === 'male'"> Male </div>
<div v-else-if="seen === 'female'"> Female </div>
<div v-else> Not specified </div> 另外,v-show 与 v-if 的区别是:
v-if 是真实的条件渲染,它会确保条件块内的事件监听器和子组件适当地被销毁和重建。
v-show 只是简单地切换元素的 CSS display 属性,条件块内的事件监听器和子组件不会被销毁。
所以,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。
总之,用 v-if 当元素可能永远也不会被渲染,用 v-show 当元素只会被隐藏的情况下。