<!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. Linq：int类型使用Contains方法

    获取的是前台传过来的String类型的值,例如:1,123,44,59 具体代码如下 if (!string.IsNullOrEmpty(str)) { string[] strArr = str.S ...

  2. ubuntu字符界面下显示中文和调整分辨率

    1.sudo apt-get install zhcon 2.vi /etc/zhcon.conf  修改下面两行 x_resolution 1024 y_resolution 768 完成这两步后在 ...

  3. 中小企业可参考的数据库架构-mysql篇

    引言 数据库在众多互联网公司中应用日益广泛,不同的公司,使用姿势不尽相同,尤其是大公司,各种自研架构,羡煞旁人.但是,作为中小企业,由于分工和团队规模限制,很难实现自研,大多数情况下,使用开源架构. ...

  4. [Usaco2017 Feb]Why Did the Cow Cross the RoadII

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=4993 [算法] 动态规划 转移类似于求LCS [代码] #include<bi ...

  5. bzoj1090 [SCOI2003]字符串折叠——区间DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1090 区间DP... 代码如下: #include<iostream> #inc ...

  6. hdu 2553（N皇后问题）

    N皇后问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  7. hash学习

    hash真奇妙 1.子串hash:如果我们要求一段子串的hash值,设h[i]:1-i的hash值,h[l-r]=h[r]-h[l-1]*pw[r-l+1],无论是模意义下还是自然溢出都是可以的 2. ...

  8. .NET获取汉字首字母

    /// <summary> /// 获取汉字首字母(可包含多个汉字) /// </summary> /// <param name="strText" ...

  9. （转）Javascript中console.log()用法

    原文地址应该是这个吧:http://my.oschina.net/junn/blog/142728 注意:必须要提前打开IE的开发者模式才能看到输入 否则就会报错. IE下可以这个判断: if (co ...

  10. ASP.NET验证控件CustomValidator客户端验证DropDownList、TextBox

    <asp:DropDownList ID="ddlTown" runat="server"> <asp:ListItem Value=&quo ...