v-for循环方法

最新推荐文章于 2023-07-07 16:55:54 发布

cabacwj

最新推荐文章于 2023-07-07 16:55:54 发布

阅读量476

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/cabacwj/article/details/126980572

版权

1.v-for遍历对象

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <div id="app">
      <ul>
        <li v-for="item in obj">{{item}}</li>
        <hr>
        <li v-for="(val,key) in obj">{{ key }}-{{ val }}</li>
      </ul>
   </div> 
   <script src="./vue.js"></script>

   <script>
    new Vue({
        el:'#app',
        data:{
            obj:{
                name:'卡拉米',
                age:16,
                sex:'男',

            }
        }
    })
   </script>
</body>
</html>

效果图：

2.v-for遍历数字

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 遍历数字(指定次数的循环) -->
        <h2>以下是指定次数</h2>
    <ul>
        <!-- num是1~9 -->
        <li v-for="num in 9">{{ num }}</li>
    </ul>
    </div>
    <script src="./vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            
        })
        
    </script>
</body>
</html>

效果图：

3.v-for遍历数组

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <!-- 语法:<标签v-for= 'item in数组‘></标签> -->

    <div id="app">
      <button @click="add">在最里面添加一个元素</button>
      <ul>
        <!--第一个参数是元素,第二个参数是下标。与名字无关.
        --很多时候只是为了拿元素,可能用不到下标。-->
        <li v-for="(item,index) in list">{{ index }}-{{ item }}</li>
      </ul>
    </div>

    <script src="./vue.js"></script>

    <script>
      new Vue({
        el:'#app',
        data:{
            list:['刘备','关羽','张飞']
        },
        methods:{
          add(){
              this.list.push('彭聪')
          }
        }
      })
    </script>
</body>
</html>

效果图：

4.v-for中key的作用

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="list.splice(1,0,{id:4,name:'ccs'})">添加</button>
       <ul>
        <li v-for="item in list" :key="item.id">
            <input type="checkbox">
            <span>{{ item.name}}</span>

        </li>
       </ul>
    </div>
    <script src="./vue.js"></script>

    <script>
        new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'护牙菜'},
                    {id:2,name:'匆匆'},
                    {id:3,name:'小老鼠'}
                ]
            }
        })
    </script>
</body>
</html>

效果图: