Vue之 $set的使用
1,什么时候使用$set
set为解决双向绑定失效而生,只需要关注什么时候双向绑定失效就可以了。
2,Vue.set 和 this.$set
this.$set 实例方法,该方法是全局方法 Vue.set 的一个别名
3,$set 用法
数组:
this.$set(Array, index, newValue)
对象:
this.$set(Object, key, value)
4,实例
data中未定义,手动给form添加age属性,并且点击按钮进行自增。
如果使用 this.form.age = 10 这种方式,不能进行添加和自增,数据无法响应式。
使用 this.$set方式实现响应式
<template><div><h1> {{ form }} </h1> <!--{name:'xxx'}/ {name:'xxx',age:10}--><button @click="add">添加</button></div>
</template>
<script>
export default{data(){return{form:{name: 'xxx',}}}methods:{add(){if(!this.form.age){this.$set(this.form, age, 10) // 成功// Vue2中监听不到动态给对象添加的属性的// this.form.age = 10 // 失败无法添加,更无法自增} else {this.form.age++}}}
}
</script>
作用
如果是一个对象,我们可以给他动态增添一些属性,并且保证这些属性是个响应式的!
Vue之 $set的使用相关推荐
- canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法 项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
- vue实现文件上传功能
代码如下所示: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
- win10 4步快速安装vue
1 安装nvm-windows 在这里下载安装nvm,目的是在同一台电脑中管理多个 Node 版本 建议采取默认安装路径安装 2 安装nodejs 以管理员模式打开命令行,然后输入 nvm list ...
- 前端Vue学习之路(五)插件的使用
vant插件使用 这里我们是用的语法是vue2.0 所以是 npm i vant -S 用法 1.按需引入的话 找到package.json文件 添加以下内容 plugins:[['import', ...
- 前端Vue学习之路(四)axios请求数据
axios 1.增加新知识 2.旧方案 3.新方案(一) 4.为什么要用拦截器 (新方案二) 1.增加新知识 假如每个组件都引用axios,后期如果axios库不再维护了,那每个组件都要改动 所以封装 ...
- 前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由 二.动态路由+路由嵌套+404页面 三. 编程式导航 四.命名路由 五.命名视图 六.重定向和起别名 1.重定向 2.起别名 ...
- 前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言 先安装node.js环境 ...
- Vue 自定义权限指令
前述 虽然VUE 定义了一些常用的指令,例如v-on.v-bind等,但是在我们实际开发的时候,还是会自己定义一些指令用于适应我们自己的业务. 实现 这里由于我的项目做了动态权限,页面的按钮也需要根据 ...
- vue响应式给数组中的对象添加新属性
需要使用到vue的全局api $set(item,'newParam','value')方法 group: [ // 对象数组{ id: '1', name: '任务1' ,disable: fals ...
- Vue生命周期函数详解
生命周期图 生命周期方法 var vm = new Vue({el: '#app',data: {msg:'ok'},methods: {show:function () {console.log(& ...
最新文章
- (转载博文)VC++API速查
- NOP 指令作用[转]
- Together与Visual.Studio.NET的结合使用(二)
- ajax发送post请求_按键精灵安卓版发送post和get请求
- Linux中包的管理与程序安装
- linux 终端控制-- 多彩输出 格式排版
- python中的glob 模块学习文件路径查找
- U-Mail邮件服务系统任意文件上传+执行漏洞(runtime缺陷与验证绕过)
- HelloWorld讲解
- OpenStack 的Nova组件详解
- LINUX系统服务总结之三:nis服务器全集
- Spring mvc json
- 【库安装】windows下Python安装protobuf
- AI 对不起 我还爱着你
- 【每日算法Day 84】面试必考题:Trie(字典树/前缀树)的实现
- t470键盘拆解_联想ThinkPad T470拆机图解教程
- 企业微信【加入群聊】群活码十问十答
- MySQL-查询权限索引约束
- 手机充值了还是显示无服务器,手机显示已联网,但却不能用,怎么办?
- luna16目标检测(记录)