3-VUE -set
语法 :Vue.set( target, key, value )
参数:
{Object | Array} target
{string | number} key
{any} value
返回值:设置的值。
用法:
向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为 Vue 无法探测普通的新增属性 (比如
this.myObject.newProperty = 'hi'
)
简单来说,vue.set的作用就是在构造器外部操作构造器内部的数据、属性和方法。
外部数据:不在vue构造器里的data出生命,而是在构造器外部声明的数据,然后再data处可以引用。
外部数据的加入让程序更加灵活,我们可以在外部获取任何想要的数据形式,然后让data引用。
引入外部数据的例子:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>vue-set实例</title><script type="text/javascript" src="../assets/js/vue.js" ></script>
</head>
<body><h1>VUE-set 全局操作</h1><div id='ele'> <p v-text="count"></p><ul><li v-for="item in arr" v-text='item'></li></ul></div ><p><button onclick="Add()">add</button></p><script>function Add(){//Vue.set(outData,'count',2);//app.count++;//outData.count++;ele.arr[1]='ddd';Vue.set(ele.arr,1,"arr");}//在构造器外部声明数据var outData={count:1,goods:"car",arr:['aaa','bbb','ccc'],}var ele=new Vue({el:'#ele',//引用外部数据data:outData})</script></body>
</html>
在外部改变数据的三种方法:
- vue.set改变
- 用vue对象的方法添加
- 直接操作外部数据
<script>function Add(){Vue.set(outData,'count',2);//使用vue.set改变ele.count++;//使用vue对象改变outData.count++;//直接操作外部数据}var outData={count:1,goods:"car",arr:['aaa','bbb','ccc'],}var ele=new Vue({el:'#ele',data:outData}) </script>
引入vue.set的原因:
由于javascript的限制,vue不能自动检测以下变动的数组:
- 当你利用索引直接设置一个项时,vue不会为我们自动更新
- 当你修改数组的长度时,vue不会为我们自动更新
<body><h1>VUE-set 全局操作</h1><div id='ele'> <p v-text="count"></p><ul><li v-for="item in arr" v-text='item'></li></ul></div ><p><button onclick="Alert()">Alert</button></p><script>function Alert(){//ele.arr[1]='ddd';//该设置对于页面是没有刷新效果的Vue.set(ele.arr,1,"arr");}var outData={count:1,goods:"car",arr:['aaa','bbb','ccc'],}var ele=new Vue({el:'#ele',data:outData})</script></body>
3-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(& ...
最新文章
- 从91移动应用发展趋势报告看国内应用现状
- 大数据精准营销:买水培栀子花该推送啥
- Oracle编程入门经典 第11章 过程、函数和程序包
- [蓝桥杯][基础练习VIP]Huffuman树
- Android 在 Google 开发者大会上发布了哪些更新? | Google 开发者大会 2018
- 130个你需要了解的VIM命令
- Bootstrap学习(二)
- linux运维高频命令汇总
- ado显示,删除后刷新重新显示
- FreeRTOS内核实现02:任务的定义与任务切换
- 90 后篮球运动员成功转型 iOS 开发,过程超刺激
- aix升级openssh_AIX6.1上源码编译升级openssh6.6p1
- HCIE-Security Day13:防火墙双机热备实验(一)防火墙直路部署,上下行连接交换机
- ERROR: libass not found using pkg-config2
- HTML基础-李南江
- AR增强现实技术解读
- php 英文替换中文,php如何中英文符号替换?
- 无线网络攻击类型及防范
- 电视出现服务器无响应是怎么回事儿,电视运行卡顿无响应死机怎么办,只需三步让电视焕然一新!...
- linux中的lnk格式,ink文件扩展名,ink文件怎么打开?
热门文章
- Spring中@Autowired注入static静态变量空指针异常
- python中空间的位置怎么放置_python / django,名称空间的根在哪里?
- 注册键值的根路径无效_mybatis mapper 接口注册流程源码解析
- Python matplotlip画多张图
- 微信公众平台开发,图文回复、access_token生成调用、以及微信SDK的实现(2)
- 利用Metaweblog技术的API接口同步到多个博客网站(详细)
- 3. Builder(建造者)
- Elasticsearch2.2.0数据操作
- nginx1.6.2编译安装
- 从时间中提取年月(MySQL中extract函数用法)