<!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. 编程题：1. var person = '{name:"Lily",sex:"famale",age:24,country:"US"}';将person转换成JSON对象并便利每个属性值。

    /// <summary> /// Json工具类 /// </summary> public class JsonUtility { private static JsonU ...

  2. 在VS2010下使用AppFace

    AppFace的介绍网上一大堆,此文仅为自己作个记录,方便以后查看. 一.需要的文件:1.AppFace.h  2.appface.lib 3.appface.dll 4.macosx_af.urf ...

  3. [Android6.0][RK3399] 电池系统（三）电量计 CW2015 驱动流程分析【转】

    本文转载自:http://blog.csdn.net/dearsq/article/details/72770295 Platform: RK3399 OS: Android 6.0 Kernel: ...

  4. 如何判断http服务器是否支持range寻址

    如果向支持range寻址的http服务器发带range的请求 ,会有什么结果呢?是否有错误返回?数据怎么下载? 诸葛小炎fire | 浏览 569 次   您的回答被采纳后将获得: 系统奖励20(财富 ...

  5. Masonry scrollview循环布局

    前言 说到iOS自动布局,有很多的解决办法.有的人使用xib/storyboard自动布局,也有人使用frame来适配.对于前者,笔者并不喜欢,也不支持.对于后者,更是麻烦,到处计算高度.宽度等,千万 ...

  6. openpyxl写excel

    import openpyxl wb = openpyxl.load_workbook(r"C:\Users\Administrator\PycharmProjects\zhandian_j ...

  7. Mysql数据库的触发器、存储引擎和存储过程

    数据库的触发器 1.触发器 触发器是MySQL响应以下任意语句而自动执行的一条MySQL语句(或位于BEGIN和END语句之间的一组语句): DELETE,INSERT,UPDATE 我们可以监视某表 ...

  8. Ubuntu 14.04 配置 Java SE jdk-7u55 （转载）

    转自:http://blog.csdn.net/tecn14/article/details/24797545 JDK  目前最新版为jdk-8u5,这次没有选择安装最新的jdk8,而是要安装jdk7 ...

  9. ASP.NET Core MVC 打造一个简单的图书馆管理系统 (修正版)（四）图书信息的增删改查

    前言: 本系列文章主要为我之前所学知识的一次微小的实践,以我学校图书馆管理系统为雏形所作. 本系列文章主要参考资料: 微软文档:https://docs.microsoft.com/zh-cn/asp ...

  10. 洛谷 P3953 逛公园【spfa+记忆化dfs+bfs】

    spfa预处理出最短路数组dis,然后反向建边bfs出ok[u]表示u能到n点 然后发现有0环的话时候有inf解的,先dfs找0环判断即可 然后dfs,设状态f[u][v]为到u点,还可以跑最短路+v ...