运行结果：由于将isShow设置为false：刚开始没有显示 更改isShow的值，div内容显示：
v-if和v-else的结合使用：有时候，我们需要控制在不同条件下显示不同的div标签内容时，可以借助v-if和v-else的结合使用，以此达到实现效果： 示例代码： <div id="app"> <p v-if="isShow">isShow为true时显示</p> <p v-else>isShow为false时显示</p> </div> <script> const app = new Vue({ el: '#app', data: { message: 'Hello World', isShow: true, }, methods: {} }); </script>运行结果：当isShow的值为false时，显示以下内容 更改isShow的值为false，显示另一个div的内容：
v-if、v-else-if和v-else的结合使用：有些后判断的情况不止两种，v-if以及v-else的结合已经不能满足要求，需要再借助v-else-if进行结合使用： 示例代码： <div id="app"> <p v-if="score>=90">优秀</p> <p v-else-if="score>=80">良好</p> <p v-else-if="score>=60">及格</p> <p v-else>不及格</p> <h1>{{result}}</h1> </div> <script> const app = new Vue({ el: '#app', data: { message: 'Hello World', score: 99, }, computed: { result() { let message = ''; if(this.score>=90){ message = '优秀'; }else if(this.score>=80){ message = '良好' }else if(this.score>=60){ message = '及格' }else{ message = '不及格' } return message; } }, methods: {} });运行结果： 更改score的值，v-else-if进行判断，并且改变显示相应的div
