<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <script type="text/javascript" src="vue2.2.js"></script>

        <title>Vue.set 全局操作</title>

    </head>

    <body>

        <h1>Vue.set 全局操作</h1>

        <div id="app">

            <ul>

                <li v-for=" item in arr">{{item}}</li>

            </ul>

        </div>

        <button onclick="add()">外部添加</button>

        <script type="text/javascript">

            function add() {

                console.log("我已经执行了");

                //vm.arr[1] = 'd'; 用数组下标监测不到数据更新

                Vue.set(vm.arr,1,'d');

            }

            var outData = {

                arr: ['a', 'b', 'c']

            };

            var vm = new Vue({

                el: '#app',

                data: outData

            })

        </script>

    </body>

</html>

外部数据，就是不在Vue构造器里里的data处声明，而是在构造器外部声明，然后在data处引用就可以了。外部数据的加入让程序更加灵活，我们可以在外部获取任何想要的数据形式，然后让data引用。

在外部改变数据的三种方法：

1、用Vue.set改变

function add(){
　　Vue.set(outData,'count',2);
}
2、用Vue对象的方法添加

app.count++;

3、直接操作外部数据

outData.count++;

vue2.0 vue.set()的更多相关文章

  1. vue2.0 vue.extend()的拓展

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Vue2.0 Vue.set的使用

    原文链接: https://blog.csdn.net/qq_30455841/article/details/78666571

  3. vue1.0和vue2.0的区别(二)

    这篇我们继续之前的vue1.0和vue2.0的区别(一)继续说 四.循环 学过vue的同学应该知道vue1.0是不能添加重复数据的,否则它会报错,想让它重复添加也不是不可以,不过需要定义别的东西 而v ...

  4. VUE2.0学习总结

    摘要: 年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! VUE2.0学习 vue介绍 vue是什么? https://vuefe.cn/guide vue也是一个数据驱动框架 ...

  5. vue2.0实践 —— Node + vue 实现移动官网

    简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vu ...

  6. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║Vue基础：JS面向对象&字面量& this字

    缘起 书接上文<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十四 ║ VUE 计划书 & 我的前后端开发简史>,昨天咱们说到了以我的经历说明的web开发经历的 ...

  7. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础：ES6初体验 & 模块化编程

    缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...

  8. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  9. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十三║Vue实战：Vuex 其实很简单

    前言 哈喽大家周五好,马上又是一个周末了,下周就是中秋了,下下周就是国庆啦,这里先祝福大家一个比一个假日嗨皮啦~~转眼我们的专题已经写了第 23 篇了,好几次都坚持不下去想要中断,不过每当看到群里的交 ...

随机推荐

  1. python和python3

    1 安装python和python3的方法 如果是python,那么直接python setup.py install; 如果是python3,那么直接python3 setup.py install ...

  2. Posting array of JSON objects to MVC3 action method via jQuery ajax

    Does the model binder not suport arrays of JSON objects? The code below works when sending a single ...

  3. W5500EVB UDP模式的測试与理解

    之前的博文中已经介绍过W5500EVB 在TCP模式下的两种(Server及Client)传输数据的实现过程,那么传输控制协议中,UDP也是很经常使用的.这样的无连接的协议在很多其它场合为用户提供了便 ...

  4. Swift学习笔记十四：构造（Initialization）

         类和结构体在实例创建时,必须为全部存储型属性设置合适的初始值. 存储型属性的值不能处于一个未知的状态.     你能够在构造器中为存储型属性赋初值,也能够在定义属性时为其设置默认值.下面章节 ...

  5. （17）会话之Cookie的使用详解

    Cooke技术 1,特点 Cookie技术:会话数据保存在浏览器客户端. 2,Cookie技术核心 Cookie类:用于存储会话数据  1)构造Cookie对象 Cookie(java.lang.St ...

  6. log4j_自定义样式参数意义

    #自定义样式 %c 输出所属的类目,通常就是所在类的全名 %C 输出Logger所在类的名称,通常就是所在类的全名 %d 输出日志时间点的日期或时间,默认格式为ISO8601,也可以在其后指定格式,比 ...

  7. arm位清零bic指令

    (1)指令的语法格式 BIC{<cond>}{S} <Rd>,<Rn>,<shifter_operand> BIC(Bit Clear)位清零指令,将寄 ...

  8. YTU 2558: 游起来吧！超妹！

    2558: 游起来吧!超妹! 时间限制: 1 Sec  内存限制: 128 MB 提交: 70  解决: 22 题目描述 夏天到了,无聊的超妹跑到了落雪湖里抓鱼吃.结果,游到湖的正中 央时被湖边保安看 ...

  9. cell.getCellType有几种

    CellType 类型 值CELL_TYPE_NUMERIC 数值型 0CELL_TYPE_STRING 字符串型 1CELL_TYPE_FORMULA 公式型 2CELL_TYPE_BLANK 空值 ...

  10. 七.OC基础加强--1.内存管理 2.野指针,内存泄露 3.set方法的内存管理 4.@property参数 5.@class和循环retain的使用 6.NSString的内存管理

    1,内存管理简单介绍 1,为什么要有内存管理? malloc selloc dealloc```需要回头复习 一般的内存 4s 是512m内存:6 是1024m内存: 当内存过大时,会耗尽内存.出现程 ...