vue2.0 vue.set()
2024-09-03 19:07:22
<!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++;
最新文章
- 【搬砖】安卓入门(1)- Java开发入门
- ASP.NET 系列:单元测试
- WCF实例上下文模式与并发模式对性能的影响
- Qt之QAbstractItemView视图项拖拽(一)
- Android中的Shape使用总结
- 无法加载一个或多个请求的类型。有关更多信息,请检索 LoaderExceptions 属性
- Managing Hierarchical Data in MySQL
- 创建一个MVC解决方案,添加一个控制器后,运行程序报错:”/";未找到服务器
- Swing动画之游戏角色
- about hibernate lazy load and solution
- HDU 5438 拓扑排序+DFS
- 支持缩放的fresco图片控件 —— fresco sample: ZoomableDraweeView
- JAVAEE规范基础知识
- (三十一)java多线程二
- Game Engine Architecture 3
- TZOJ :2731: 存钱计划(二)
- JS基础——变量
- 什么是物理像素、虚拟像素、逻辑像素、设备像素,什么又是 PPI, DPI, DPR 和 DIP
- eclipse中tomcat无法加载spring boot
- 设计模式之&mdash;&mdash;Template模板模式
热门文章
- Apache Flink 1.5.0 Release Announcement
- WEB 字体
- Mac Mysql [ERR] 2006 - MySQL server has gone away
- Android沉浸式状态栏(透明状态栏)最佳实现
- 强类型DataSet (2011-12-30 23:16:59)转载▼ 标签: 杂谈	分类: Asp.Net练习笔记 http://blog.sina.com.cn/s/blog_9d90c4140101214w.html
- 微信公众平台-文章-app:让创意变为现实,这30个小程序“凭什么”脱颖而出?
- 3.jeesite主从表开发
- 【412】Linux 系统编译 C 程序
- python3 + selenum 环境搭建
- bzoj P1979 华容道【bfs+spfa】