v-if和v-else和v-else的使用

最新推荐文章于 2024-08-21 11:45:01 发布

会飞的土拨鼠呀

最新推荐文章于 2024-08-21 11:45:01 发布

阅读量1.3k

点赞数 2

分类专栏： Vue学习之路文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_44534541/article/details/124908898

版权

Vue学习之路专栏收录该内容

14 篇文章 3 订阅

订阅专栏

本文介绍了Vue.js中使用v-if和v-else进行条件渲染的方法，通过示例展示了如何根据分数显示不同的等级评价，如优秀、良好、及格和不及格。同时，提到了当条件复杂时，可以使用计算属性（computed）创建自定义函数来实现更复杂的逻辑判断。

摘要由CSDN通过智能技术生成

v-if和v-else和v-else的使用

if-elseif-else条件判断，如果您之前学过一门编程语言，相信一定非常好理解。当分数大于90为优秀，大于80小于90为良好，以此类推。最后条件不包含的情况（else）为不及格。

<!-- v-if和v-else和v-else的使用 -->
<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>
<!--从CDN引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    const app = new Vue({ //初始化一个VUE实例
        el: '#app',     // 用于页面渲染VUE实例的元素
        data: { // 定义数据
            score: 95
        }


    })
</script>

在这里插入图片描述

自定义函数

当条件很多的时候可以使用自定义函数来实现。

<div id="app">

    <h1>{{resultScore}}</h1>
    
</div>
<!--从CDN引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    const app = new Vue({ //初始化一个VUE实例
        el: '#app',     // 用于页面渲染VUE实例的元素
        data: { // 定义数据
            score: 95
        },
        computed: {
          //当条件很多的时候可以使用自定义函数来实现。
          // 复杂的逻辑建议使用这种方式来写。
          resultScore() {
            let showMessage = '';
            if (this.score >= 90) {
              showMessage = '优秀'
            } else if (this.score >= 80) {
              showMessage = '良好'
            } else if (this.score >= 60) {
              showMessage = '及格'
            } else if (this.score < 60) {
              showMessage = '不及格'
            }
            return showMessage
          }
        }


    })
</script>