VUE3（四）条件渲染

v-if、v-else-if、v-else

基本使用

    <template id="my-app">
        <h2 v-if="isShow">哈哈哈</h2> 
        <button @click="toggle">切换</button>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const app={
            template:"#my-app",
            data(){
                return{
                    isShow: true
                }
            },
            methods:{
                toggle(){
                    this.isShow=!this.isShow;
                }
            }
        };
        Vue.createApp(app).mount("#app");
    </script>

多个条件使用

    <template id="my-app">
        <h2 v-if="score > 90">优秀</h2>
        <h2 v-else-if="score > 60">良好</h2>
        <h2 v-else>不及格</h2>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        const app={
            template:"#my-app",
            data(){
                return{
                    message: "hello world",
                    score: 50
                }
            },
            methods:{

            }
        };
        Vue.createApp(app).mount("#app");
    </script> 

如果条件语句顺序错乱（如esle在else if之前），那么将会什么都不显示，也没有报错；

如果在条件语句之间插入非条件的标签，显示会异常并给出警告。

v-if是惰性的（渲染时机）