- v-if 指令是“真正”的条件渲染,因为它会确保在切换过程中条
件块内的事件监听器和子组件适当地被销毁和重建。 - 相比之下,v-show指令就简单得多,不管初始条件是什么,元
素总是会被渲染,并且只是简单地基于CSS进行切换。
3.一般来说,v-if指令有更高的切换开销,而v-show指令有更高
的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show
指令较好;如果在运行时条件很少改变,则使用v-if指令较好。
以下为各自的小例子 ,共各位博友参考*
v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<h1>用户登录/注册</h1>
<input type="checkbox" v-model="isRegUser" />
<div v-if="isRegUser">
<h3>注册</h3>
</div>
<div v-else>
<h3>登录</h3>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
isRegUser: true
}
})
</script>
</body>
</html>
v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<h1>上班时间</h1>
<input type="checkbox" v-model="inTheSummer" />夏天时间
<div v-show="inTheSummer">
<h3>夏天时间</h3>
</div>
<div v-show="!inTheSummer">
<h3>冬天时间</h3>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
inTheSummer: true
}
})
</script>
</body>
</html>