您现在的位置是：首页 >其他 >一起来学习vue吧（v-if,v-else,v-else-if）网站首页其他

一起来学习vue吧（v-if,v-else,v-else-if）

hyswl666 2024-09-29 12:01:03
简介一起来学习vue吧（v-if,v-else,v-else-if）

话不多说，咱们直接上代码

<div v-if="false">
                <div v-if="true">111</div>
                <div v-else>222</div>    
            </div>
            <div v-else>
                <div v-if="true">333</div>
                <div v-else>444</div>    
            </div>

思考一下输出的会是什么？

当然，答案肯定是333。

其实这就和咱们之前学的大部分计算机语言的if, else,else if语法是一样的。

在执行v-if的时候判断是false，所以就直接不执行v-if盒子里面的程序了，所以111和222就可以直接逃过，来到第二个盒子v-else，这时候判断v-else盒子里面的v-if，是true，所以执行当前盒子里面的333，下面的444就不会再执行了，因为他是判断语句，所以在执行到true的时候程序就会停止。

=======================================================================下面我们来看一下v-else-if

老样子，直接上代码

<body>

<div class="out">

<div v-if="day==1">今天是周1</div>
            <div v-else-if="day==2">今天是周2</div>
            <div v-else-if="day==3">今天是周3</div>
            <div v-else-if="day==4">今天是周4</div>
            <div v-else-if="day==5">今天是周5</div>
            <div v-else-if="day==6">今天是周6</div>
            <div v-else-if="day==7">今天是周7</div>
            <div v-else>格式错误</div>

</div>

</body>

<script>
    new Vue({
        el: ".out",//这里是命名class
        data: {
            day: 5
        }
    })
</script>

好的，这次大家应该知道输出的是什么了吧

就是今天是周5这句话。

这里咱们就是用做比较。==就是等于的意思。咱们用data里面的day去和数字一一做比较，如果对上了，就输出，如果对不上，就往下执行。

咱们先和1做对比day==1，咱们的已经在data里面赋值了，是5（day：5），因为5不等于1，所以判断为false，继续往下执行，一次类推，到了咱们day==5的时候，这时候5等于5，判断为true，则执行输出，不在往下执行判断，所以输出的为今天是周5

好了，今天v-if和v-else还有v-else-if就这么多，想要继续拓展的可以自己想个案例去做，只要思路正确，就不会出错。

风语者！平时喜欢研究各种技术，目前在从事后端开发工作，热爱生活、热爱工作。

站长推荐