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

1.通过指令中的布尔值决定是否展示该元素

        <div id="app">
            <h2 v-if="score>=90">优秀</h2>
            <h2 v-else-if="score>=80">良好</h2>
            <h2 v-else-if="score>=60">及格</h2>
            <h2 v-else>不及格</h2>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const app = new Vue({
                el: '#app',
                data: {
                    score: 80
                }
            })
        </script>

通过指令中表达式的布尔值决定是否展示该指令对应的h2元素

2.改进

需要通过计算转化的数据最好放在计算属性中处理

        <div id="app">
            <h2>{{scoreShow}}</h2>
        </div>

                computed: {
                    scoreShow(){
                        let show = '';
                        if(this.score >=90) {
                            show = '优秀'
                        }else if(this.score >=80) {
                            show = '良好'
                        }else if(this.score >=60) {
                            show = '及格'
                        }else {
                            show = '不及格'
                        }
                        return show
                    }
                }

image.png

3.切换登录案例

image.png
image.png

利用按钮的点击事件，控制span标签中v-if的布尔值，决定是否渲染该span标签

        <div id="app">
            <span v-if="isShow">
                <label for="userLogin">用户登录</label>
            <input type="text" id="userLogin" placeholder="输入用户名" />            
            </span>
            <span v-if="!isShow">
                <label for="messageLogin">邮箱登录</lable>
                <input type="text" id="messageLogin" placeholder="输入邮箱"/>               
            </span>

            <button @click="isShow=!isShow">切换登录</button>

        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            const app = new Vue({
                el: '#app',
                data: {
                    isShow: 'true'
                }
            })
        </script>