天天看點
傳回

vue中set的使用(改變資料，頁面資料也相應改變)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue執行個體生命周期鈎子</title>
    <script src="./vue.js"></script>
    <style>
        .actived {
            color: red;
        }
    </style>
</head>
<body>


    <div class="" id="app">
       <template v-for="item in list">
            <div @click="handleClick">{{item}}</div>
       </template>
    </div>
    <script>
        var vm = new Vue({
            el: "#app", 
            data: {
                list: [1, 2, 3]
            },
            methods: {
                handleClick: function() {
                    vm.$set(vm.list, 2, 66)     // 動态修改數組資料
                    console.log(vm.list[2])
                }
            }
        })
    </script>


</body>
</html>
           
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue執行個體生命周期鈎子</title>
    <script src="./vue.js"></script>
    <style>
        .actived {
            color: red;
        }
    </style>
</head>
<body>


    <div class="" id="app">
       <template v-for="(item, name) in obj">
            <div @click="handleClick">{{item}}    -------    {{name}}</div>
       </template>
    </div>
    <script>
        var vm = new Vue({
            el: "#app", 
            data: {
                obj: {
                    'name': 'xiaohao', 
                    'age': 19,
                    'address': 'beijin'
                }
            },
            methods: {
                handleClick: function() {
                    vm.$set(vm.obj, "tel", '666666')  //  動态添加資料
                    console.log(vm.list[2])
                }
            }
        })
    </script>


</body>
</html>
vue
上一篇: cypher 資料庫的基礎使用
下一篇: Neo4j-在JAVA中執行Cypher查詢

繼續閱讀