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(); })

vuejsLearn--- -- 怎么查看、修改、追加数据---->data对象

推荐阅读