vue2.0 vue.set()
2023-09-27 14:26:17 时间
<!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++;
相关文章
- Vue.js 常见面试题
- 38 Vue控制过渡效果
- 【Vue+element+admin】环境配置说明
- 解决 vue 的缩进问题 及 vue 的 sass 调用 mixin 函数
- Vue - 完美解决 Element UI 侧边导航菜单 <el-menu> 出现滚动条,去掉 Element 侧边导航组件的横纵滚动条(但滚动功能依然保留,仅仅是去掉 “滚动条“)100% 解决方案
- Vue elementUI table 图片 鼠标经过图片放大效果实现
- vue-i18n安装和实现国际化,$t的用法
- vue中$set的实现方法
- ant vue table scopedSlots customRender 获得字段名称
- vue只能本地跨域,线上跨域要后端弄
- Vue 3结合element plus(问题总结一)之 table数据更新而视图不跟新
- Vue 项目如何实现一个全局菜单搜索框
- vue文档摘录七:内置组件
- vue router编程式导航
- vue-router4之路由传参
- Vue对日期进行格式化操作
- 在vue中引入layer弹框的简易方法
- vue里ref ($refs)用法
- 如何使用vue-table-with-tree-grid树形表格组件
- SpringBoot+Vue实现的文件管理系统 附带详细运行指导视频