3. v-if进行复杂判断的情况

作者: 最爱喝龙井 | 来源:发表于2019-10-22 11:53 被阅读0次

3. v-if进行复杂判断的情况
Vue.js条件语句
Vue.js 条件与循环
Vue.js条件判断（v-if 和 v-show）
vue.js--条件语句&循环语句
vue中使用swiper不能循环播放
vue 基础 v-if v-else-if v-else v-f
vue中v-show 和 v-if 的区别：
v-if判断指令
vue2.0基础(一、内部指令)

在进行复杂的逻辑判断的时候，最好不用v-if，v-else-if，而是使用计算属性，来进行判断

<!DOCTYPE html>
<html lang="zh-CN">

<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>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">
       <div v-if="scope > 90">优秀</div>
       <div v-else-if="scope>80">良好</div>
       <div v-else-if="scope>60">及格</div>
       <div v-else>不及格</div>

       <h2>{{result}}</h2>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                scope: 99
            },
            methods: {
               
            },
            computed: {
                result() {
                    let showMsg = '';
                    if(this.scope >= 90) {
                        showMsg = '优秀';
                    }else if (this.scope >= 80) {
                        showMsg = '良好'
                    }else if (this.scope >= 60) {
                        showMsg = '及格'
                    }else {
                        showMsg = '不及格'
                    }
                    return showMsg;
                }
            }
        });
    </script>
</body>

</html>