v-if

最新推荐文章于 2024-05-14 21:04:35 发布

jwz934738949

最新推荐文章于 2024-05-14 21:04:35 发布

阅读量145

点赞数

分类专栏： Vue基础

本文链接：https://blog.csdn.net/jwz934738949/article/details/107102425

版权

Vue基础专栏收录该内容

59 篇文章 1 订阅

订阅专栏

v-if、v-else与v-else-if是Vue中用于条件判断的指令，与后端中的if、else、if else一致。当条件过多时，使用v-if会使得代码太过复杂，不便于观看，所以条件过多时使用计算属性来进行条件的判断较为合适。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件判断v-if</title>
</head>
<body>
<div id="app">
    <h2 v-if="score>=90">优秀</h2>
    <h2 v-else-if="score>=80">良好</h2>
    <h2 v-else-if="score>=70">中等</h2>
    <h2 v-else-if="score>=60">及格</h2>
    <h2 v-else>不及格</h2>

    <!--    在实际使用中，如果条件过于复杂，一般不会直接使用v-if，而是使用计算属性来进行条件判断-->
    <h3>{{show}}</h3>
</div>
<script src="js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            score: 90,
            message: ""
        },
        computed: {
            show() {
                if (this.score >= 90) {
                    this.message = "优秀";
                } else if (this.score >= 80) {
                    this.message = "良好";
                } else if (this.score >= 70) {
                    this.message = "中等";
                } else if (this.score >= 60) {
                    this.message = "及格";
                } else {
                    this.message = "不及格";
                }
                return this.message
            }
        }
    })
</script>
</body>
</html>

jwz934738949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-if

v-if、v-else与v-else-if是Vue中用于条件判断的指令，与后端中的if、else、ifelse一致。当条件过多时，使用v-if会使得代码太过复杂，不便于观看，所以条件过多时使用计算属性来进行条件的判断较为合适。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>条件判断v-if</title></hea.
复制链接

扫一扫

专栏目录