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里面的数 ...
随机推荐
- 解决sql server2008数据库安装之后,web程序80端口被占用问题(终极方案)
解决sql server2008数据库安装之后,web程序80端口被占用问题(终极方案) 前言:原来电脑上的Apache一直使用正常,在安装sql server2008后,突然发现Apache无法启动 ...
- SpringBoot整合WEB开发--(五)自定义错误页
目的与原理: 处理异常时,若我们想根据实际情况返回不同的页面,@ControllerAdvice与@ExceptionHandler,一般用于处理应用级别的异常,一些容器级别的错误就处理不了,例如Fi ...
- SpringBoot--application.yml
application.properties 配置了端口号:9090 application.yml 也配置了端口号:8080 SpringBoot使用9090,以属性为主 1.在applicatio ...
- Paper: A novel method for forecasting time series based on fuzzy logic and visibility graph
Problem Forecasting time series. Other methods' drawback: even though existing methods (exponential ...
- Oracle VM VirtualBox - 启用 VT-x/AMD-V 支持
问题描述Oracle VM VirtualBox引入OVF模板时,报错:VT-x/AMD-V 硬件加速已被启用, 但当前处于无效状态. 您虚拟电脑内的操作系统将无法检测到64位的处理器,因此也将无法启 ...
- C# LINQ GroupBy
一.先准备要使用的类: 1.Person类: class Person { public string Name { set; get; } public int Age { set; get; } ...
- 刷题75. Sort Colors
一.题目说明 题目75. Sort Colors,给定n个整数的列表(0代表red,1代表white,2代表blue),排序实现相同颜色在一起.难度是Medium. 二.我的解答 这个是一个排序,还是 ...
- 面试题:HashSet、TreeSet 和HashMap 的实现与原理
说下 TreeSet 和 HashSet 什么区别呢? 它们的区别点主要在他们的底层数据结构不同,HashSet 使用的是 HashMap 来实现,而 TreeSet 使用的是 TreeMap 来实现 ...
- Web API入参,响应规范
入参绑定 入参应该定义成实体,而不是多个参数,方便扩展.[FromBody]和[FromUrl]特性也最好加上. public ActionResult<Pet> Create([From ...
- spring(一):思维导图