06-条件判断

李先生 2020年12月15日 89次浏览

条件判断

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

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <button @click="change">按钮</button>
        <h2 v-if="isShow">{{msg}}</h2>
        <h2 v-else>isShow为false显示我</h2>

        <div>
            <input type="number" v-model="score">
            <br>
            {{score}}
            <br>
            <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>

        <!-- 但是  如果出现上述复杂判断场景 尽量选择计算属性的方式进行显示 -->
        <br>
        {{result}}
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               msg:"你好",
               isShow:true,
               score:0,
           },
           methods:{
               change(){
                   this.isShow = !this.isShow;
               },
           },
           computed:{
               result(){
                let showMessage = "";
                
                if (this.score >= 90){
                    showMessage = "优秀"
                }else if(this.score >= 80){
                    showMessage = "良好"
                }else if(this.score >= 60){
                    showMessage = "及格"
                }else{
                    showMessage = "不及格"
                }
                return showMessage

               }
               
           }
        });
    </script>
</body>

</html>

案例及小问题

由于vue虚拟DOM树的存在,当浏览器渲染页面时,会对现有组件进行复用以提高性能,所以会导致input内用户输入的内容在更新组件的时候被保留了,有些业务情景下不希望如此
我们可以通过给input标签加入key关键字来解决这种问题

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <span v-if="isUser">
            <!-- for用来指定id,当点击这个标签时,会将光标跳到这个id上 -->
            <label for="username">用户账号</label>
            <input type="text" id="username" placeholder="用户账号">
        </span>
        <span v-else>
            <label for="email">邮箱地址</label>
            <input type="text" id="email" placeholder="email">
        </span>
        <button @click="isUser = !isUser">切换类型</button>
        <br>
        <span v-if="isUser2">
            <!-- for用来指定id,当点击这个标签时,会将光标跳到这个id上 -->
            <label for="username">用户账号</label>
            <input type="text" id="username" placeholder="用户账号" key="username">
        </span>
        <span v-else>
            <label for="email">邮箱地址</label>
            <input type="text" id="email" placeholder="email" key="email">
        </span>
        <button @click="isUser2 = !isUser2">切换类型</button>
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               isUser:true,
               isUser2:true
           },
           methods:{}
        });
    </script>
</body>

</html>

v-show

v-if和v-show对比

  • v-if和v-show都可以决定一个元素是否渲染,那么开发中我们如何选择呢?
    • v-if当条件为false时,压根不会有对应的元素在DOM中
    • v-show当条件为false是,仅仅是将元素的display属性设置为none而已
  • 开发中如何选择?
    • 当需要在显示与隐藏之间切换很频繁时,使用v-show
    • 当只有一次切换时,使用v-if
<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 将组件在dom树中删除达到目的 -->
        <h2 v-if="isShow">{{msg}}</h2>
        <!-- 将组件的display属性设置为none,组件还在dom树中 -->
        <h2 v-show="isShow">{{msg}}</h2>
    </div>
    <script>
        const app = new Vue({
           el:'#app',
           data:{
               msg:"你好",
               isShow:true
           },
           methods:{}
        });
    </script>
</body>

</html>