条件渲染 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 较好。
Logo

前往低代码交流专区

更多推荐