<!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. Android5.1修改以太网MAC地址（SElinux）【转】

    本文转载自:http://blog.csdn.net/LoongEmbedded/article/details/71477203 最近高通平台Android5.1项目中有个关于设置以太网MAC的需求 ...

  2. UltraEdit mac破解版

    2018-01-17 增加18.00.0.19破解 去官网下载原载,先运行一次,再在终端里执行下面代码就可以破解完成! printf '\x31\xC0\xFF\xC0\xC3\x90' | dd s ...

  3. debian webmin 安装

    /******************************************************************** * debian webmin 安装 * 说明: * 在服务 ...

  4. 同步 Github fork 分支

    /**************************************************************************** * 同步 Github fork 分支 * ...

  5. GC回收算法--当女友跟你提分手！

    Java语言引入了垃圾回收机制,让C++语言中令人头疼的内存管理问题迎刃而解,使得我们Java狗每天开开心心地创建对象而不用管对象死活,这些都是Java的垃圾回收机制带来的好处.但是Java的垃圾回收 ...

  6. Tomcat 在Mac OS X中的安装和配置

    简单介绍: 1.Tomcat是目前比较流行的Web应用服务器,它是一个轻量级的应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP程序的首选. 2.Tomcat运行时所 ...

  7. UI：sqlite数据库

    使用sqllite的时候一些笔记 数据库(管理类),在工程 general 导入 动态链接库 libsqllite3.0.dylib  在.h文件里引入导入 sqllite3.h 头文件 在.h里面声 ...

  8. 反编译Android的apk包得到源码（使用工具：dex2jar和jd-gui）

    1. 先从 http://download.csdn.net/detail/dingyuming1991/9618125 下载反编译工具dex2jar和jd-gui(当然也可以google搜索下载): ...

  9. thinkphp5.0常遇到的错误

    call a member xxxx on null 1.一般是没有继承controller: 2.对象和数组使用错误.

  10. Scala入门到精通

    原文出自于: http://my.csdn.net/lovehuangjiaju 感谢! 也感谢,http://m.blog.csdn.net/article/details?id=52233484 ...