<!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. Hackrank Kingdom Division 树形DP

    题目链接:传送门 题意: 给你一棵树,n个点 每个点可以染成红色和蓝色 但是红色的点与其相邻的点中必须有红色节点,蓝色也是 问你有多少种染色的方案 题解: 树形dp 先转化为有根树,取1为根 设定dp ...

  2. Ubuntu grub2的启动配置文件grub.cfg，为了修改另人生厌的时间

    文章转自http://hi.baidu.com/detax/blog/item/90f18b54a8ef5253d00906e4.html 升级到Ubuntu 9.10后,就要接触grub2了,它和以 ...

  3. flask 文件下载 文件服务器 请求参数 函数修饰符

    180M电子书 通过已经下载到pc,在上传到私有公网服务器,之后,再异地下载 以下代码,文件内容错乱 [root@bigdata-server- mydataweb]# tree . ├── mydl ...

  4. WebService_使用三要素

    一.Java中WebService规范 JAVA 中共有三种WebService 规范,分别是JAX-WS.JAX-RS.JAXM&SAAJ(废弃). 1.JAX-WS规范 JAX-WS 的全 ...

  5. linux永久或临时修改dns

    1.临时修改网卡DNS地址 sudo vim /etc/resolv.conf 改为如下内容: nameserver 8.8.8.8 #修改成你的主DNS nameserver 8.8.4.4 #修改 ...

  6. P4284 [SHOI2014]概率充电器 dp

    这个题题干说的不清楚,一开始我以为只能是旁边紧挨着的传火,导致我一开始根本不知道哪错了.后来,我想到树形dp,但是需要正反考虑,()既要考虑父亲,又要考虑儿子),互相都有影响,所以没太想出来.后来知道 ...

  7. 服务器开发入门——理解异步I/O

    对于服务器程序,I/O是制约系统性能最关键的因素.对于需要处理大量连接的高并发服务器程序,异步I/O几乎是不二的选择.Linux和Windows都为异步I/O构建了大量的基础设施.本文总结了一下Lin ...

  8. bzoj 2229: [Zjoi2011]最小割【Gomory–Hu tree最小割树】

    这个算法详见http://www.cnblogs.com/lokiii/p/8191573.html 求出两两之间最小割之后暴力统计即可 #include<iostream> #inclu ...

  9. UOJ #206. 【APIO2016】Gap【交互题】

    参考:https://blog.csdn.net/clover_hxy/article/details/70767653 人生第一次交互题...不是很难但是思维和传统题差别挺大的(以及并不会本地测试= ...

  10. bzoj 2006: [NOI2010]超级钢琴【st表+堆】

    设计一个五元组(i,l,r,p,v),表示在以i为左端点,右端点落在(l,r)中的情况下,取最大值v时右端点落在p.把这个五元组塞到优先队列里,以v排序,每次取出一个,然后把这个取过的五元组分成两个( ...