Vue 中指令 v-show/v-if (条件渲染)的对比与使用

条件渲染 v-show 指令

• v-show指令：可以控制一个dom的显示隐藏（通过操作dom 的display属性）达到效果；
• v-show的属性值：
  * 为布尔值true时，对应css样式 display：block；
  * 为布尔值false时，对应css样式 display：none；

代码说明

<div  id="app">
	  <h3> v-show test </h3>
      <p v-show = "showFlag"> v-show指令 </p>
</div>


//js代码
var vm = new Vue({
    el: '#app',
    data: { 
      showFlag: true,
    }
  })

条件渲染 v-if 指令

• 可以和v-if 同时判断执行还包括 v-else-if,v-else指令，用法原生js条件判断用法相同；
• 另外v-if 等条件指令：主要是操控一个dom元素的创建与销毁（决定一个元素的存在与否）；
• 可以对 v-if，v-else-if，v-else进行组合，书写，可以简单称为单路分支，双路分支与多路分支；

举例说明一下：

//html代码块
 <div id="app">
    <h3> v-if - 单路分支 </h3>//通过一个指令控制元素的显示
      <p v-if = "ifFlag"> v-if - 指令的单路分支 </p>
    <h3> v-if - 双路分支 </h3>//通过两个指令判断控制元素的显示
      <p v-if = "ifFlag">  双路分支 成立  </p>
      <p v-else> 双路分支不成立 </p>

    <h3> v-if - 多路分支 </h3>//通过多个指令判断控制元素的显示
    <p v-if = " type === 'A'"> A </p>
    <p v-else-if = " type === 'B'"> B </p>
    <p v-else> C </p>
  </div>


//js代码块
<script>
	new Vue({
		el:"#app",
		data:{
		ifFlag:true,
		type:"A";
	})
</script>

//对于代码大家可以通过Vue.js devtools进行在线测试，更直观的理解条件渲染的效果

v-if与v-show总结

从两方面来说明：

• 1、v-if与v-show的区别

  • v-if 操作的是dom元素（ 组件 ） 的创建或是销毁
  • v-show 操作的是dom元素的display属性
  • v-if可以有多种使用形式： 单路分支， 多路分支， 双路分支
  • v-show 只能写一个单路形式

• 2、项目中如何选择使用：

  • 一般来说，v-if 有更高的切换开销（元素的创建与销毁），而 v-show 有更高的初始渲染开销（display属性控制元素的显示与消失）。
  • 因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。