Vue2：条件渲染(面试)

v-if /v-else 或者 v-show

实例：

 <div id="app">
    <div v-if="flag">hello</div>
    <div v-show="flag">world</div>
</div>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            flag:false
        }
    })

 

<template>
　　<button @click="fn"></button>
<div v-if="arr[0]"></div>
<div v-if="arr[1]"></div>
<div v-if="arr[2]"></div>
</template>
data(){
    return{
        arr[true,false,false]
    }
},
methods:{
　　fn(index){
　　　　this.arr.fill(false)
　　　　this.$set(this.arr,index,true)//原数组，索引值，需要传的值
　　}
}

 

1.使用的变量为true就显示,false就隐藏

2.在业务中常常可以通过操作if或者show使用的变量,来达到操作元素显示和隐藏的效果

3.v-if的做法是删除节点,v-show做法是操作css的

display:none

visibility: hidden; 不脱离文档流的

display:none 脱离文档流

v-if 删除节点

v-show display:none

 

4.v-if、v-show这个两个谁好?(面试)

根据它们底层的设计不一样有各自的使用场景

 v-if具有较高的 切换消耗,常常用在用户不常切换的模块

 v-show具有较高的性能消耗,常常用在频繁切换的模块中

 

 

v-for v-if的使用

不可同时使用

在vue2.0版本中 　　v-for 的优先级比v-if高一点

vue3.0版本中　　v-if的优先级比v-for高一点