条件判断

时间:2019-10-28
本文章向大家介绍条件判断，主要包括条件判断使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

v-if/v-else/v-elseif的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <div v-if="isShow">
       <h3>asd</h3>
       <h3>asd</h3>
       <h3>asd</h3>
       <h3>asd</h3>
       <h3>{{message}}</h3>
   </div>
   <div v-else>
        否则就显示我
   </div>

   <h3 v-if="score >= 90">优秀</h3>
   <h3 v-else-if="score >= 80">良好</h3>
   <h3 v-else-if="score >= 60">及格</h3>
   <h3 v-else>不及格</h3>

    <h3>{{result}}</h3>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            isShow: true,
            score: 99
        },
        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>　　

小案例（用户切换登录方式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span v-if="isShow">
        <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="用户邮箱" key="email">
    </span>
    <!--虚拟DOM:  Vue不会把DOM直接让浏览器渲染(有些不必要的元素可以不进行渲染)，它会先放在缓存中，根据需要再进行渲染-->
    <button @click="isShow = !isShow">切换方式</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            isShow: true
        }
    })
</script>
</body>
</html>　　

v-if/v-show的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--v-if相当于是删除元素了-->
    <h3 v-if="isShow" id="aaa">{{message}}</h3>
    <!--<h3 id="bbb" style="display: none;">你好啊</h3>-->
    <h3 v-show="isShow" id="bbb">{{message}}</h3>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊',
            isShow: true
        }
    })
</script>
</body>
</html>

　　

原文地址：https://www.cnblogs.com/Alexephor/p/11734241.html

随机文章
本站知识点必读
最近更新