VUE2.0学习记录——VUE中的列表渲染_vue2 ant 表头渲染-CSDN博客

本文链接：https://blog.csdn.net/baokx/article/details/98765975

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE中的列表渲染</title>
</head>
<body>
<div id="app">
    <div v-for="(item,index) in list" :key="item.userId">{{item.userName}}--{{index}}</div>

    <!--template占位符，实际不会渲染 -->
    <template v-for="(item,index) in list">
        <div>{{item.userName}}--{{index}}</div>
        <span>{{item.userName}}</span>
    </template>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            // 当需要对数组内容进行动态操作且页面重新渲染时，不能直接使用下标操作
            // 1.通过push pop unshift shift splice sort reverse进行操作
            // 2.直接更改数组的引用
            // 3.Vue.set(app.list,0,{userId:4,userName:'zhaoliu'})
            // 4.app.$set(app.list,0,{userId:4,userName:'zhaoliu'});
            list: [
                {
                    userId:1,
                    userName:'zhangsan'
                }
                ,{
                    userId:2,
                    userName:'lisi'
                }
                ,{
                    userId:3,
                    userName:'wangwu'
                }
            ]
        }
    });
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE中的列表渲染</title>
</head>
<body>
    <div id="app">
        <div v-for="(item,key,index) in userInfo">
            {{key}}:{{item}}--{{index}}
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            //动态改变数据并使页面重新渲染的方法：
            // 1.需通过修改引用
            // 2.Vue.set(app.userInfo.name,'lisi');
            // 3.app.$set(app.userInfo.name,'lisi');
            userInfo: {
                name: 'zhangsan',
                age: 20,
                gender: 'female',
                address: 'beijing'
            }
        }
    });
</script>
</html>