Vue学习09_Vue的条件判断

最新推荐文章于 2024-07-25 07:15:00 发布

旧梦半岛

最新推荐文章于 2024-07-25 07:15:00 发布

阅读量348

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_48459574/article/details/109223801

版权

Vue 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中用于条件渲染的指令v-if、v-else和v-else-if的使用方法。通过示例代码展示了如何根据布尔值控制元素的显示与隐藏，以及如何利用v-else-if进行多条件判断，实现不同情况下的内容展示。读者将了解到如何灵活运用这些指令来控制不同条件下的页面呈现效果。

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

Vue的条件判断

v-if的基本使用： 有时候我们需要控制标签内容的显隐，在满足某些条件时，显示标签，某些时候又要隐藏标签，因此就可以引入v-if，为其设置一个boolean值，以此来控制标签的显隐：
示例代码：

    <div id="app">
        <h3 v-if="isShow">{{message}}</h3>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
                isShow: false,
            },
            methods: {}
        });
    </script>

运行结果：由于将isShow设置为false：刚开始没有显示
在这里插入图片描述
更改isShow的值，div内容显示：

v-if和v-else的结合使用：有时候，我们需要控制在不同条件下显示不同的div标签内容时，可以借助v-if和v-else的结合使用，以此达到实现效果：
示例代码：

    <div id="app">
        <p v-if="isShow">isShow为true时显示</p>
        <p v-else>isShow为false时显示</p>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
                isShow: true,
            },
            methods: {}
        });
    </script>

运行结果：当isShow的值为false时，显示以下内容
在这里插入图片描述
更改isShow的值为false，显示另一个div的内容：

v-if、v-else-if和v-else的结合使用：有些后判断的情况不止两种，v-if以及v-else的结合已经不能满足要求，需要再借助v-else-if进行结合使用：
示例代码：

<div id="app">
        <p v-if="score>=90">优秀</p>
        <p v-else-if="score>=80">良好</p>
        <p v-else-if="score>=60">及格</p>
        <p v-else>不及格</p>
        <h1>{{result}}</h1>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
                score: 99,
            },
            computed: {
                result() {
                    let message = '';
                    if(this.score>=90){
                        message = '优秀';
                    }else if(this.score>=80){
                        message = '良好'
                    }else if(this.score>=60){
                        message = '及格'
                    }else{
                        message = '不及格'
                    }
                    return message;
                }
            },
            methods: {}
        });