Vue初学08-条件指令（v-if,v-else-if,v-else）

最新推荐文章于 2022-06-29 17:22:47 发布

置顶周达

最新推荐文章于 2022-06-29 17:22:47 发布

阅读量738

点赞数 1

分类专栏： vue 文章标签： v-if v-else-if v-else

本文链接：https://blog.csdn.net/gis_zhouda/article/details/104897676

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

条件判断

根据属性值的不同显示不同的结果，如下根据分数的不同显示不同的等级

<body>
    <div id="app">
        <p v-if="score>=90">一级</p>
        <p v-else-if="score>=80">二级</p>
        <p v-else-if="score>=70">三级</p>
        <p v-else>四级</p>
    </div>

    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                score:75
            }
        });
    </script>

</body>

如果条件比较多的情况下，这样写界面要素比较多，显得比较繁琐，可以通过计算属性来实现相同的效果，如下

<body>
    <div id="app">
        <p>{{level}}</p>
    </div>
    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                score:75
            },
            computed:{
                level(){
                    let l;
                 if(this.score>=90){
                     l="一级";
                 }
                 else if(this.score>=80){
                     l="二级";
                 }
                 else if(this.score>=70){
                     l="三级";
                 }
                 else{
                     l="四级";
                 }
                 return l;
              }
            }
        });
    </script>
</body>

控制dom的显示

通过v-if还可以控制dom元素的显示，v-if="true"表示显示，v-if="false"表示隐藏

    <div id="app">
        <p v-if="false">{{level}}</p>
    </div>

控制dom元素的显示，还可以通过v-show指令，v-show="true"表示显示，v-show="false"表示隐藏

<div id="app">
   <p v-show="false">{{level}}</p>
</div>

v-if="false"和v-show="false"是有区别的。

v-if="false"不会创建dom元素，如下

v-show="false"会创建dom元素，并设置display:none

周达

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Vue初学08-条件指令（v-if,v-else-if,v-else）

1.条件判断根据属性值的不同显示不同的结果，如下根据分数的不同显示不同的等级。2.控制dom的显示通过v-if还可以控制dom元素的显示，v-if="true"表示显示，v-if="false"表示隐藏
复制链接

扫一扫