vuejsLearn--- -- 怎么查看、修改、追加數據---->data對象

實例觀察的數據對象。可以用一個新的對象替換。實例代理了它的數據對象的屬

 

我們現在對data2添加幾項

使用數組push()追加

但是直接這樣不能進行數組操作

var data2 = { city: '上海' }

我們改造一下把city的值變成數組形式

var data2 = { city: ['上海'] }

　　

此時看一下綁定數據的頁面也是更新了追加內容

由此可得出，我們動態追加上去的東西也會綁定渲染到頁面上

 

var data2 = { city: ['上海'] }
            var vm2 = new Vue({
                el: '#example2',
                data: data2,
                methods: {
                    alertPop: function () {
                        alert("dd")
                    },
                    add: function () {
                        this.push({ city: "升水" })
                    }
                }
            });
            console.log("1:" + vm2.city);
           
            var _items = ["Shanghai", "Beijing", "Hefei", "Shengyang", "Haikou"];

            for (i = 0; i < _items.length; i++) {
                vm2.city.push(_items[i]);
                
            }

            console.log("2:" + vm2.city);

 Vue添加（執行）函數

在methods參數下定義要執行的函數

 

實例方法。實例可以直接訪問這些方法，也可以用在指令表達式內

 還可以使用jQuery點擊一個元素之后執行

var vm2 = new Vue({
                el: '#example2',
                data: data2,
                methods: {
                    alertPop: function () {
                        alert("dd")
                    }
                }
            });
            console.log(vm2.$data2);

            vm2.alertPop();

            $("#example2").on("click", function () { vm2.alertPop(); })