一、v-if
data() { return { content: "喵喵喵", play: true } }
<template> <div id="root"> <div v-if="play">{{ content }}</div> <div class="button" @click="toggle">toggle</div> </div> </template>
二、v-show
<div id="root"> <div v-show="play">{{ content }}</div> <div class="button" @click="toggle">toggle</div> </div>
根据dom结构得出v-if与v-show的区别:
v-if以删除或添加dom结点控制元素的显示隐藏
v-show是通过添加样式display:none控制元素的显示隐藏
总结:
v-if和v-show都可以控制元素的显示或隐藏,具体该使用哪一个应该根据使用情况决定。建议只有一次或少量切换的时候使用v-if,多次切换的情况使用v-show。写页面,当然要从性能方面考虑。