测试开发技术网站

[【原文链接】Vue----Vue条件渲染](http://devops-dev.com/article/649)

（1）在components文件夹下新建一个Ifdemo.vue文件。
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/6371cf5a-1470-11ee-ada7-0242ac110004.png)

（2）然后在文件中编写如下内容，即写入一个标题
```html
<template>
  <h3>条件渲染</h3>
</template>
<script>

</script>
```

（3）此时如果想在页面显示，只需要在App.vue中增加如下内容
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/a1568c70-1470-11ee-ada7-0242ac110004.png)

（4）然后运行在浏览器中就可以看到IfDemo.vue中的内容了
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/c4f1f110-1470-11ee-ada7-0242ac110004.png)

（5）修改IfDemo.vue中的代码使用v-if设置条件渲染，如下所示
```html
<template>
  <h3>条件渲染</h3>
  <div v-if="flag">你能看到我吗</div>
</template>
<script>
export default {
  data(){
    return {
      flag:true
    }
  }
}

</script>
```
此时浏览器是能看到的，因为此时flag为true，可以尝试一下将flag设置为false，然后浏览器就看不到这句话了。
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/97b9e4b0-1474-11ee-ada7-0242ac110004.png)

（6）v-if和v-else一起用的方法如下所示
```html
<template>
  <h3>条件渲染</h3>
  <div v-if="flag">你能看到我吗</div>
  <div v-else>你看不到我了</div>
</template>
<script>
export default {
  data(){
    return {
      flag:false
    }
  }
}

</script>
```
此时因为flag设置为false，所以这里会显示v-else的内容
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/6e6f2b78-1475-11ee-ada7-0242ac110004.png)

（7）v-if,v-else-if,v-else 一起使用的方法如下所示
```html
<template>
  <h3>条件渲染</h3>
  <div v-if="flag">你能看到我吗</div>
  <div v-else>你看不到我了</div>
  <div v-if="type === 'A'">A</div>
  <div v-else-if="type === 'B'">B</div>
  <div v-else-if="type === 'C'">C</div>
  <div v-else>Not A B C</div>
</template>
<script>
export default {
  data(){
    return {
      flag:false,
      type: "D"
    }
  }
}

</script>
```

此时的执行结果如下图所示
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/214289fc-1476-11ee-ada7-0242ac110004.png)

（8）此外，还可以通过v-shwo设置是否显示，如下所示
```html
<template>
  <h3>条件渲染</h3>
  <div v-if="flag">你能看到我吗</div>
  <div v-else>你看不到我了</div>
  <div v-if="type === 'A'">A</div>
  <div v-else-if="type === 'B'">B</div>
  <div v-else-if="type === 'C'">C</div>
  <div v-else>Not A B C</div>
  <div v-show="flag">你能看到我吗</div>
</template>
<script>
export default {
  data(){
    return {
      flag:true,
      type: "D"
    }
  }
}

</script>
```

这里把flag设置为true了，所以会显示出来
![](https://redrose2100.oss-cn-hangzhou.aliyuncs.com/img/adeb4560-1476-11ee-ada7-0242ac110004.png)

（9）v-if和v-shwo的比较

* v-if 是真实的按条件渲染，因为它确保了在切换时，条件区内的事件监听器和子组件都会被销毁与重建

* v-if 也是惰性的，如果在初次渲染时条件为false，则不会做任何事，条件区块只有当条件首次变为true时才会被渲染

* v-shwo简单许多，元素无论初始条件如何，都会被渲染，只有CSS display属性会被切换

* 总体来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销，因此，如果需要频繁切换，则使用v-shwo较好，如果在运行时绑定条件很少变化，则v-if更合适

测试开发技术网站

博客