vue 中 $set 的使用
在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue $set</title>
<script src="https://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>
</head>
<body>
<div id="app">
姓名：{{ name }}<br>
年龄：{{age}}<br>
性别：{{sex}}<br>
说明：{{info.content}}
</div>
<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
<script>
var data = {
name: "简书",
age: '3',
info: {
content: 'my name is test'
}
}
var key = 'content';
var vm = new Vue({
el:'#app',
data: data,
ready: function(){
//Vue.set(data,'sex', '男')
//this.$set('info.'+key, 'what is this?');
}
});
data.sex = '男'；
</script>
</body>
</html>
<script>
var data = {
name: "简书",
age: '3',
info: {
content: 'my name is test'
}
}
var key = 'content';
new Vue({
el:'#app',
data: data,
ready: function(){
Vue.set(data,'sex', '男');
this.$set('info.'+key, 'what is this?');
}
});
</script>
vue 中 $set 的使用的更多相关文章
- 怎么在vue中使用less
最近使用vue2.0重构项目, 使用vue-cli脚手架构建, 采用webpack模板, 要在项目中使用less进行样式的编写 首先, 打开终端, 在当前项目目录下安装less npm install ...
- Vue中的$set的使用
在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新 ...
- mockjs在vue中的使用
mockjs在vue中的使用 安装好vue-cli后 加载模块: npm install mockjs 创建mock.js文件到src目录下的任一合适文件内新建mockjs.js,设置好拦截信息,设置 ...
- Vue.Draggable/SortableJS 的排序功能，在VUE中的使用
此插件git: https://github.com/SortableJS/Vue.Draggable 基于Sortable.js http://www.cnblogs.com/xiangsj/p/6 ...
- mescroll在vue中的应用
1.npm install --save mescroll.js 2. <template> <div> <!--全部--> <mescroll-vue re ...
- 基于iscroll的better-scroll在vue中的使用
什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里.better-scroll 也很强 ...
- ckeditor5富文本编辑器在vue中的使用
安装依赖: npm install --save @ckeditor/ckeditor5-vue @ckeditor/ckeditor5-build-classic 要创建编辑器实例,必须首先将编辑器 ...
- better-scroll在vue中的应用
在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 微信 —> 钱包—>滴滴出行”体验效果. 什么是 better-scrol ...
- ESLint在vue中的使用
ESLint的用途 1.审查代码是否符合编码规范和统一的代码风格: 2.审查代码是否存在语法错误: 中文网地址 http://eslint.cn/ 使用VSCode编译器在Vue项目中的使用 在初始 ...
- vue中watch的使用
vue中watch的使用 vue中的watch是一个比较重要的概念,通过他我们可以检测data的变化,下面进行详细的介绍. watch定义方式如下: {[key: string]: string | ...
随机推荐
- Maven虐我千百遍，我待Maven如初恋
前言 在如今的互联网项目开发当中,特别是Java领域,可以说Maven随处可见.Maven的仓库管理.依赖管理.继承和聚合等特性为项目的构建提供了一整套完善的解决方案,可以说如果你搞不懂Maven,那 ...
- 【WIP_S9】图论算法
创建: 2018/06/01 图的概念 有向边 有向图 无向边 无向图 点的次数: 点连接的边的数量 闭路: 起点和重点一样 连接图: 任意两点之间都可到达 无闭路有向图: 没有闭路的有向图 森林: ...
- Unity mesh 合并
簡介: 基本上就是把 很多物體結合成一個物體 的作法,這種做法有很多優點,例如:1. 提高效能2. 統一材質 (只要建立一個材質,就能控制.分配給所有物體)3. 動畫控制方便 (像是你要在 Unity ...
- 洛谷P3723 [AH2017/HNOI2017]礼物（FFT）
传送门 首先,两个数同时增加自然数值相当于只有其中一个数增加(此增加量可以小于0) 我们令$x$为当前的增加量,${a},{b}$分别为旋转后的两个数列,那么$$ans=\sum_{i=1}^n(a_ ...
- c#学习系列之Application.StartupPath的用法（美女时钟的做法）
Application.StartupPath是一个只读属性,是不可以设置的. Application.StarupPath获取启动了应用程序的可执行文件的路径,不包括可执行文件的名称.既是Appli ...
- 530 Minimum Absolute Difference in BST 二叉搜索树的最小绝对差
给定一个所有节点为非负值的二叉搜索树,求树中任意两节点的差的绝对值的最小值.示例 :输入: 1 \ 3 / 2输出:1解释:最小绝对差为1,其中 2 和 1 的差的绝对值为 ...
- Exception in thread "main" java.lang.SecurityException: class "javax.servlet.FilterRegistration"'s signer information does not match signer information of other classes in the same package解决办法（图文详解）
不多说,直接上干货! 问题详情 SLF4J: See http://www.slf4j.org/codes.html#multiple_bindings for an explanation. SLF ...
- TruncateTable数据库清理
原文引用 https://www.cnblogs.com/liangxiaoking/p/5958456.html 本地链接下载 https://files.cnblogs.com/files/she ...
- 前端之Html元素的分类
一.html元素可分为三大类:块元素.内联元素.可变元素 1.块元素: 常见块状元素:div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,h1-h6,filedse ...
- AJPFX关于Collection接口的总结
###15Collection-List-ArrayList/LinkedList/* * Collection接口中的方法* A:添加功能* boolean add ...