大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

Vue循环数组和对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- key值的使用 -->
        <!-- 操作数组时,不能直接用修改下标的方式做
            1. 可以生效的方式:pop() push() splice() sort() shift() unshift() reverse()
            2. 也可以改变数组的引用地址
            3. Vue.set(vm.lists, 0, {userId:10}); 第二个为下标
            4. vm.$set(vm.lists, 0, 10);
            <template>模板占位符,能够帮忙循环渲染一些东西,但是不会变成标签显示到页面上
            
            数组中的set方法:
                
            
        -->
        
        <!-- <div v-for="(item,index) of lists" :key="item.id">{{ item.text }} - {{index}}</div> -->

        <!-- template占位符 -->
        <!-- <template v-for="(item,index) of lists" :key="item.id">
            <div>{{item.text}}</div>
        </template> -->

        <!-- 循环对象 -->
        <!-- 直接加对象属性和值不能循环出来  比如:userInfo.address = "beijing"  是不管事的-->
        <!-- 1. 方式:改变引用 -->
        <!-- 2. 通过set方式向对象注入数据
            Vue.set(vm.userInfo, 'address', 'beijing');
        -->
        <!-- 3. set实例方法:
            vm.$set(vm.userInfo, 'address', 'beijing')
        -->
        <div v-for="(item,key,index) of userInfo">
            {{item}} -- {{key}} -- {{index}}
        </div>

    </div>
    <script>
        var vm = new Vue({
            el : "#app",
            data : {
                lists : [
                    {
                        id : '001112222',
                        text : 'hello'
                    },{
                        id : '001112223',
                        text : 'world'
                    },{
                        id : '001112224',
                        text : 'fujingwen'
                    }
                ],
                userInfo : {
                    name : "fjw",
                    age : 20,
                    sex : "female"
                }
            }
        })
    </script>
</body>
</html>