Vue快速入门3

条件渲染

v-if

v-if 指令用于条件性的渲染一块内容，这块内容只会在指令的表达式返回true 值的时候被渲染。

<p v-if="flag">我是p标签</p>

  data(){

    return{

      flag:true

    }

  }

v-else

可以使用v-else指令来表示v-if的“else块”

<p v-if="flag">我是if</p>
 <p v-else>我是else</p>

data(){
    return{
      flag:false
    }
  }

v-else 必须接在v-if下面写，否则就会提示错误

 

 v-show

另一个用于条件性展示元素的选项是 v-show指令

用v-show实现的效果，v-if也能实现，那么为什么要有v-show呢？

v-if 是增删dom元素。

v-show是更改元素属性，display:none;不显示；display:block;显示； v-if增删dom元素有较高的切换开销，而v-show有较高的初始渲染开销。因此，如果需要频繁切换，则使用v-show比较好。如果在运行时很少改变，则使用v-if比较好。

 

ok。内容很少，来总结一下：①可以通过v-if 来控制元素展示或者不展示。v-if=“true”  展示，反之不展示

　　　　　　　　　　　　　　② 在v-if下可以接着写 v-else 来显示条件为else的元素

　　　　　　　　　　　　　　③v-show。v-show 也能控制元素的显示与不显示。而且v-if完全能实现v-show的功能效果。那么为什么要再加一个v-show指令呢。他们之前有什么区别呢。区别就在于v-if是通过增删dom元素来控制显示和不显示。v-show是通过css来控制。两者在性能上有区别。因为增删dom元素 消耗的性能肯定大于改css大。所以，某个元素频繁变化，一会儿显示一会不显示，那么就用v-show，如果不经常变化，就用v-if；