10.Vue2.x条件渲染—v-if、v-show

文章目录

- 条件渲染—v-if、v-show

条件渲染—v-if、v-show

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>条件渲染</title><script type="text/javascript" src="../js/vue.js"></script><style>img {width: 100px;}</style></head><body><!-- 条件渲染：v-if:适用于：切换频率很低的场景特点：不展示的DOM节点直接被删除v-show:适用于：切换频率很高的场景特点：不展示的DOM节点没有被删除，仅仅是使用样式隐藏掉严重注意：使用v-if时，DOM节点可能无法获取到，而使用v-show一定可以获取到DOM节点--><!-- 准备好一个容器 --><div id="root"><h2>今天天气很{{isHot ? '炎热' : '凉爽'}}</h2><!-- <button @click="changeWeather">切换天气</button> --><button @click="isHot=!isHot">切换天气</button><!-- 只要天气炎热，才会展示下面的div --><div v-show="isHot"><img src="https://s3.ax1x.com/2020/12/13/reC1IA.jpg" /><br /><br /><span>建议：心静自然就会凉</span></div><!-- 只要天气凉爽，才会展示下面的div --><div v-show="!isHot"><img src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg" /><br /><br /><span>建议：建议穿秋裤</span></div><!-- ================================================================ --><!-- 使用v-if、 v-else、 v-else-if做条件渲染 --><div v-if="isHot"><img src="https://s3.ax1x.com/2020/12/13/reC1IA.jpg" /><br /><br /><span>建议：心静自然就会凉</span></div><!-- 只要天气凉爽，才会展示下面的div --><div v-else><img src="https://s3.ax1x.com/2020/12/13/reCaqg.jpg" /><br /><br /><span>建议：建议穿秋裤</span></div></div><script>new Vue({el: "#root",data: {isHot: true,},methods: {changeWeather() {this.isHot = !this.isHot;},},});</script></body>
</html>