浅谈v-if和v-show的区别及使用

v-if和v-show

• 相同点：都是控制元素的显示与不显示

• 不同点：

  • v-show只是简单的CSS属性切换，无论条件真与否，都会被编译。
  • v-if属于真正的条件渲染，它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。若表达式初始值为false，则一开始元素/组件并不会被渲染，只有当条件第一次变为真时才开始编译。

• 特点：

  • v-show：不展示的DOM元素并未被移除，仅仅是在元素上加载了内联样式display:none将其隐藏。
  • v-if：不展示的DOM元素直接被移除。

• 适用场景：

  • v-show适用于频繁切换条件
  • v-if因为切换开销相对较大，更适合条件不经常改变的场景

• 例子：

  • 使用v-if：

    		<div id="app">
    			<template v-if="status == 1">
    				<p>这是一段文本1</p>
    				<p>这是一段文本1</p>
    				<p>这是一段文本1</p>
    				<p>这是一段文本1</p>
    			</template>
    			<p v-else-if="status == 2">这是一段文本2</p>
    			<p v-else>这是一段文本3</p>
    		</div>
    		<script type="text/javascript" src="../js/vue.js"></script>
    		<script type="text/javascript">
    			new Vue({
    				el:'#app',
    				data:{
    					status:1
    				}
    			})
    		</script>
    

    • 一次判断多个元素时，可以在Vue.js内置的<template>使用条件指令，最终渲染的结果不会包括<template>标签。
    • v-if、v-else-if、v-else都是条件渲染指令，与if、else、else if类似。

  • 使用v-show：

    		<div id="app">
    			<p v-show="status == true">状态为真时显示</p>
    		</div>
    		<script type="text/javascript" src="../js/vue.js"></script>
    		<script type="text/javascript">
    			new Vue({
    				el:'#app',
    				data:{
    					status:true
    				}
    			})
    		</script>
    

    • 注意：v-show不能在<template>上使用