vue基础_4.条件渲染与列表渲染

最新推荐文章于 2024-04-30 08:37:00 发布

前端小佩奇

最新推荐文章于 2024-04-30 08:37:00 发布

阅读量143

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_44761755/article/details/118864668

版权

vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.条件渲染（v-if与v-show）

上节已经展示过 v-show 与 v-if 和 v-else 的用例，这里再添加一个条件判断 v-else-if（相当于 if( ) ，else if( )，else 只不过是在前面加了个 v- 而已）

<body>
    <div id="app">

      <p v-if="count==1">count==1时显示</p>
      <p v-else-if="count==2">count==2时显示</p>
      <p v-else-if="count==3">count==3时显示</p>
      <p v-else>count为其他数字时显示</p>
      
    </div>

    <script>
        var vm=new Vue({    
           el:"#app",  
           data:{

             count:2

            },
        })
    </script>
</body>

网页显示结果：
在这里插入图片描述

1.2 v-if 与v-show都有隐藏元素的作用，那开发的时候采用哪个更好呢？

v-if 是惰性的，只有当它条件满足才被创建并渲染。而 v-show 不管条件满不满足开始都会被创建渲染，只是被display隐藏起来了而已。总之 元素需要频繁切换就用v-show ，反之就用 v-if 。

2.列表渲染（v-for）

语法：v-for="被迭代数组元素别名 in 源数据数组名 " :key="被迭代数组元素唯一标识名"
也可以：v-for="（被迭代数组元素别名 , 数组迭代的下标） in 源数据数组名 " :key="被迭代数组元素唯一标识名"
也可以遍历一个对象：v-for=" 对象的值 in 对象 "
或者提供键名：v-for=" (对象的值 , 键名) in 对象 "
或者提供索引：v-for=" (对象的值 , 键名,索引别名) in 对象 "

例：

<body>
    <div id="app">

        <div>---遍历一般数组-----------------------------------</div>
        <span v-for="item in items1" :key="item">
            {{item}}，
        </span>

        <div>---遍历数组对象（常用）---------------------------</div>
        <div v-for="item in items2" :key="item.id">
            <span>id:{{item.id}}，</span>
            <span>name:{{item.name}}</span>
        </div>

        <div>---遍历对象--------------------------------------</div>
        <div v-for="(value,name) in items3">
            {{name}}：{{value}}
        </div>

        <div>---遍历二维数组----------------------------------</div>
        <div v-for="(item,index) in items4" :key="index">
            <span v-for="(it,index) in item" :key="index">
                {{it}}
            </span>
        </div>
    </div>

    <script>
        var vm=new Vue({    
           el:"#app",  
           data:{

             items1:[1,2,3,4,5], //普通一维数组

             items2:[        //数组对象
                 {
                     id:"1212",
                     name:"张三",
                 },
                 {
                     id:"3434",
                     name:"李四",
                 }
             ],

             items3:{   //对象
                  name:"王某某",
                  age:21,
                  phone:"13224521209"
              },

             items4:[     //二维数组
                 [1,2,3,4],
                 ['a','b','c','d']
             ]

            },
        })
    </script>
</body>