Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法。比如在vue构造器内部定义了一个count为1的数据,我们在构造器外部定义了一个方法,要每次点击按钮给值加1.就需要用到Vue.set。
// 构造器外部数据
wrapData ={
number:1
}
var vm = new Vue({
el:"#app",
data:wrapData, //引入外部数据(非内部构造器里面的)
methods:{
add:function(){
this.number++;
}
}
})

html

<div id="app">
<!-- <button v-on:click="add">数据变化</button> -->
<button onclick="add()">数据变化</button>
<div>{{number}}</div>
</div>
在外部改变数据的三种方法    这些个button按钮都是写在外部 ,而不在new  vue({})作用域里面
1、用Vue.set改变
function add(){
Vue.set(wrapData,'number',4);
}
2、用Vue对象的方法添加
function wrapAdd2(){
vm.number++;
}
3、直接操作外部数据
function wrapAdd3(){
wrapData.number++;
}
为什么要有Vue.set的存在?
由于Javascript的限制,Vue不能自动检测以下变动的数组。
*当你利用索引直接设置一个项时,vue不会为我们自动更新。
*当你修改数组的长度时,vue不会为我们自动更新。
上面不是说到了三种改变number值得方法吗,如果是改变数组,通过下标,那三种方式中只有Vue.set会起作用,这也就是它存在的意义

html

<div id="app">
<!-- <span v-text="number"></span> -->
<ul>
<li v-for="item of items">{{item}}</li>
</ul>
</div>

js

function  wrapAdd(){
// vm.items[0]=12; //外部调用vue属性方法不起作用
// wrapData[0]=12; //外部直接操作数组也是不起作用
// 这时候Vue.set在对数组方面就凸显出用处了
Vue.set(vm.items,1,12)
}
var wrapData =[20,30,45] var vm = new Vue({
el:"#app",
data:{
items:wrapData
} //引入外部数据(非内部构造器里面的)
})

Vue.set全局操作的更多相关文章

  1. Vue2.0 【第二季】第3节 Vue.set全局操作

    目录 Vue2.0 [第二季]第3节 Vue.set全局操作 第3节:Vue.set全局操作 一.引用构造器外部数据 二.在外部改变数据的三种方法: 三.为什么要有Vue.set的存在? Vue2.0 ...

  2. Vue2.0 - 全局操作 Vue.set

    引:http://www.cnblogs.com/zccblog/p/7192420.html Vue.set 的作用就是在构造器外部操作构造器内部的数据.属性或者方法.比如在vue构造器内部定义了一 ...

  3. vue 定义全局函数,监听android返回键事件

    vue 定义全局函数,监听android返回键事件 方法一:main.js 注入(1)在main.js中写入函数Vue.prototype.changeData = function (){ aler ...

  4. 生命周期函数以及vue的全局注册

    beforeCreate 在创造实例之前 created 创造实例以后 beforeMount 在挂载前 render 渲染节点到页面上 //将虚拟dom数组渲染出来 mounted 挂载以后 bef ...

  5. vue入门全局配置

    全局配置 Vue.config 是一个对象,包含 Vue 的全局配置.可以在启动应用之前修改下列属性: silent 类型:boolean 默认值:false 用法: Vue.config.silen ...

  6. vue 中 直接操作 cookie 及 如何使用工具 js-cookie

    转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...

  7. 035——VUE中表单控件处理之使用vue控制select操作文字栏目列表

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

  8. Vue之cookie操作(原生)

    Vue之cookie操作(原生) 再vue组件中加入以下几个方法,然后调用即可. methods:{ //读取cookie,需要注意的是cookie是不能存中文的,如果需要存中文,解决方法是后端先进行 ...

  9. vue 自定义全局方法

    import {myfun} from '../static/js/test.js' //se6的正确写法export default {methods:{ diyfun:function () { ...

随机推荐

  1. 【安装虚拟机一】配置VMware

    安装软件 VMware 10 CentOS-6.5-x86_64-minimal.iso 第一步:打开VMware 10  主页选择 “创建新的虚拟机” 第二步:选择自定义设置 第三步:设置虚拟机兼容 ...

  2. Redis的key和value大小限制

    Redis的key和value大小限制        今天研究了下将java bean序列化到redis中存储起来,突然脑袋灵光一闪,对象大小会不会超过redis限制?不管怎么着,还是搞清楚一下比较好 ...

  3. 转:"为自动填充列调整大小期间不能执行此操作"解决办法 .

    转载自:http://blog.csdn.net/zhxingway/article/details/5384690 今天在测试的时候,打开一个窗口突然发现出现以下错误,就算我在打开窗口那个按钮里面和 ...

  4. AWS免费云服务套餐申请步骤及常见问题

    AWS免费云服务套餐申请步骤及常见问题 AWS免费使用套餐常见问题_AWS免费云服务套餐_-AWS云服务https://amazonaws-china.com/cn/free/faqs/ 什么是 AW ...

  5. Step6:SQL Server 数据变更时间戳(timestamp)在复制中的运用

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 方案(Solution) 方案一(Solution One) 方案二(Solution Two ...

  6. 关于java 操作linux命令的 一些相关

    ThreadPoolExecutor pool= new ThreadPoolExecutor(5,10, 3, TimeUnit.SECONDS, new LinkedBlockingQueue&l ...

  7. 利用yum搭建lamp环境并进一步创建博客

    用yum搭建lamp环境 第一.安装apache yum -y install httpd 第二.安装mariadb Yum -y mariadb mariadb-server 第三.安装php Yu ...

  8. Linux sed 命令字符串替换使用方法详解

    1. sed替换的基本语法 sed 's/原字符串/替换字符串/' 单引号里面,s表示替换,三根斜线中间是替换的样式,特殊字符需要使用反斜线”\”进行转义.2. 单引号” ‘ ’”是没有办法用反斜线” ...

  9. linux下安装与部署redis

    一.Redis介绍 Redis是当前比较热门的NOSQL系统之一,它是一个key-value存储系统.和Memcache类似,但很大程度补偿了Memcache的不足,它支持存储的value类型相对更多 ...

  10. 20145326蔡馨熤《网络对抗》——MSF基础应用

    20145326蔡馨熤<网络对抗>——MSF基础应用 实验后回答问题 用自己的话解释什么是exploit,payload,encode. exploit:起运输的作用,将数据传输到对方主机 ...