zoukankan      html  css  js  c++  java
  • 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(); })
    
  • 相关阅读:
    记第一场省选
    POJ 2083 Fractal 分形
    CodeForces 605A Sorting Railway Cars 思维
    FZU 1896 神奇的魔法数 dp
    FZU 1893 内存管理 模拟
    FZU 1894 志愿者选拔 单调队列
    FZU 1920 Left Mouse Button 简单搜索
    FZU 2086 餐厅点餐
    poj 2299 Ultra-QuickSort 逆序对模版题
    COMP9313 week4a MapReduce
  • 原文地址:https://www.cnblogs.com/ruoqiang/p/5623306.html
Copyright © 2011-2022 走看看