VUE——列表、对象循环渲染，更新 

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>列表、对象循环渲染</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <div v-for="(item,index) of list" :key="item.id">
                {{item.text}} ———— {{index}}
            </div>
            <div v-for="(item,key,index) of userInfo">
                {{item}}--{{key}}--{{index}}
            </div>
        </div>
        <script type="text/javascript">
            // push pop shift unshift splice sort reverse
            // 修改引用
            // vm.list = [{}],vm.unseInfo={}
            var vm = new Vue({
                el: "#app",
                data: {
                    list: [{
                        id: "33",
                        text: "hello"
                    }, {
                        id: "32",
                        text: "Harold"
                    }, {
                        id: "31",
                        text: "Jim"
                    }],
                    // Vue.set(vm.userInfo,"addr","shanghai"),vm.$set(vm.userInfo,"addr","shanghai")
                    userInfo: {
                        name: "LGSP",
                        age: 28,
                        gender: "male",
                        salary: "secret"
                    }
                },

            })
        </script>
    </body>

</html>

 

posted @ 2019-10-25 16:42  嘆世殘者——華帥  阅读(676)  评论(0)  编辑  收藏  举报