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;

 

posted @ 2023-03-10 20:05  勇敢面对20201106  阅读(28)  评论(0)    收藏  举报