vue中,怎么给data对象添加新的属性?(尼玛这面试题居然让我给碰上了。。。。)
Vue中给data中的对象属性添加一个新的属性时会发生什么,如何解决?
示例:
<template>
<div>
<ul>
<li v-for="value in obj" :key="value">
{{value}}
</li>
</ul>
<button @click="addObjB">添加obj.b</button>
</div>
</template>
<script>
export default{
data () {
return {
obj: {
a: 'obj.a'
}
}
},
methods: {
addObjB () {
this.obj.b = 'obj.b'
console.log(this.obj)
}
}
}
</script>
<style></style>
点击button会发现, obj.b 已经成功添加,但是视图并未刷新:

addObjB () {
// this.obj.b = 'obj.b'
this.$set(this.obj, 'b', 'obj.b')
console.log(this.obj)
}
$set() 方法相当于手动的去把 obj.b 处理成一个响应式的属性,此时视图也会跟着改变了:

vue中,怎么给data对象添加新的属性?(尼玛这面试题居然让我给碰上了。。。。)的更多相关文章
- vue data对象添加新属性触发视图
<template> <div class="wrap open"> <a>{{test01.name}}</a> <a> ...
- vue 数组中嵌套的对象添加新属性--页面更新
vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735
- javascript已存在的对象构造器中是不能添加新的属性的:
<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程 ...
- vue中改变数组或对象,页面没做出对应的渲染
原文链接 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sor ...
- Vue中,给当前元素添加类名移除兄弟元素类名的方法
在Vue中,给当前元素添加类名移除兄弟元素类名的方法 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以 ...
- ASP.NET MVC系列:为已有模型添加新的属性
在模型类Movie中添加一个新的属性Rating
- vue中组件的data为什么是一个函数
1. 前言 在学习vue的时候,一直纳闷一件事:组件的data数据为什么必须要以函数返回的形式,为什么不是简单的对象形式呢?遂带着问题去翻官方文档,文档中自然也写明了这么做的原因,本篇博文以官方文档给 ...
- Vue中可用的判断对象是否为空的方法
vue有两个方法可用 1. JSON.stringify(evtValue)=='{}' 2. Object.keys(xxx).length==0 js判断对象是否为空对象的几种方法 1.将json ...
- Vue实例的的data对象
介绍 Vue的实例的数据对象data 我们已经用了很多了,数据绑定离不开data里面的数据.也是Vue的核心属性. 它是Vue绑定数据到HTML标签的数据源泉,另外Vue框架会自动监视data里面的数 ...
随机推荐
- SE篇
1. List 和 Set 区别 List 特点:元素有放入顺序,元素可重复 Set 特点:元素无放入顺序,元素不可重复,重复元素会覆盖掉 2. List 和 Map 区别 ...
- Linux安装Tomcat,解决不能访问Manager App
在Windows环境中安装Tomcat时,只需要在Tomcat目录下/conf/tomcat-user.xml文件增加用户就可以了.在Linux系统中添加了username还是不能访问. 一.Li ...
- 录入规则文件名到CSV文件
import os import sys import csv # 导出到csv文件 def export_to_csv(datas): with open('export.csv', 'w', ne ...
- wpf 程序启动显示图片
一.设置图片的生成操作 程序启动时会出现0.5秒的图片显示,再显示程序界面. 二.写代码实现相同效果 /// <summary> /// App.xaml 的交互逻辑 /// </s ...
- Spring作用域和BeenFactory
1.Spring Bean实例作用域: ① singleton: IOC容器仅创建一个Bean实例,IOC容器每次返回的是同一个Bean实例. ② prototype: IOC容器可以创建多个 ...
- Hog实例
1.计算Hog的特征得维度: #include <iostream> #include <opencv2/core/core.hpp> #include <opencv2 ...
- markdown文本编辑学习笔记2
目录 1.删除线 2.无序列表 4 todo list 5分割符号 6 TOC自动生成目录 7 插入代码块 8 斜体.粗体.删除线.下划线.背景高亮 markdown编辑公式 1.删除线 ~~要删除的 ...
- Execl导入系统
文件导入功能 前台代码: Content\JS\jquery.ajaxfileupload.js<script src="~/Content/JS/jquery.ajaxfileupl ...
- [JSOI2016]最佳团体 DFS序/树形DP
题目 洛谷 P4322 [JSOI2016]最佳团体 Description 茜茜的舞蹈团队一共有\(N\)名候选人,这些候选人从\(1\)到\(N\)编号.方便起见,茜茜的编号是\(0\)号.每个候 ...
- (转)数据索引BTree
.B-tree 转自:http://blog.csdn.net/hbhhww/article/details/8206846 B-tree又叫平衡多路查找树.一棵m阶的B-tree (m叉树)的特性如 ...