首页 > 其他 > 详细

vue循环v-for

时间:2021-04-12 12:35:00      阅读:14      评论:0      收藏:0      [点我收藏+]

1.列表渲染指令v-for

在vue中,可以通过v-for指令可以将一组数据渲染到页面中,数据可以是数组或者对象。

<!-- v-for不仅可以遍历数组,还可以遍历对象,这里大家记住v-for里面的一个东西 :key, 就是v-bind:key,这个key是干什么的呢,就是为了给现在已经渲染好的li标签做个标记,以后即便是有数据更新了,也可以在这个li标签里面进行数据的更新,不需要再让Vue做重新生成li标签的dom操作,提高页面渲染的性能,因为我们知道频繁的添加删除dom操作对性能是有影响的,我现在将数据中的id绑定到这里,如果数据里面有id,一般都用id,如果没有id,就绑定v-for里面那个index(当然你看你给这个索引取的变量名是什么,我这里给索引取的名字是index),这里面它用的是diff算法 -->
<!-- <li v-for="(item,index) in data.users" :key="item.id" @click> 还可以绑定事件 -->
<li v-for="(item,index) in book_list" :key="item.id"> 第{{index+1}}本图书:{{book.title}}</li>
<!-- v-for的优先级最高,先把v-for遍历完,然后给:key加数据,还有,如果没有bind这个key,有可能你的页面都后期用动态数据渲染的时候,会出现问题,所以以后大家记着,一定写上v-bind:key -->

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bb{
            background-color: tan;
        }

    </style>
    <script src="vue.js"></script>
</head>
<body>

    <div id="app">
        <ul>
            <li v-for="(value,index) in hobby_list" :key="index">{{value}}--{{index}}</li>
            <!-- value是数组中的元素,index是索引,注意v-for一定要写 :key -->
<!--            <li v-for="value, index in hobby_list">{{value}}</li>-->
        </ul>

        <ul>
            <li v-for="(value,index) in person_info" :key="index">{{value}} -- {{index}}</li>
        </ul>

        <table border="1">
            <thead>
            <tr>
                <th>商品名称</th>
                <th>价格</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(value,index) in goods" :key="index" :class="{bb:value.price>60}">
                <td>{{value.name}}</td>
                <td>{{value.price}}</td>
            </tr>
            </tbody>

        </table>

    </div>



</body>
<script>
        // 思路:
        // 当用户点击标题栏的按钮[span]时,显示对应索引下标的内容块[.list]
        // 代码实现:
        var card = new Vue({
            el:"#app",
            data:{
                num:0,
                hobby_list:[
                    抽烟,
                    喝酒,
                    烫头,
                    烫头2,
                ],
                person_info:{
                    name:永飞,
                    age:99,
                    sex:unknown,
                },
                goods:[
                    {"name":"python入门","price":150},
                    {"name":"python进阶","price":100},
                    {"name":"python高级","price":75},
                    {"name":"python研究","price":60},
                    {"name":"python放弃","price":110},
                ]
            },
            methods:{

            }

        });
    </script>
</html>

 

vue循环v-for

原文:https://www.cnblogs.com/xo1990/p/14646596.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!