不能给Vue实例、Vue实例的根数据对象添加属性。

文件

<template>
<div id="app">
<h2>{{hello}}:{{animal.name}}</h2>
</div>
</template> <script>
export default {
name: "app",
data: () => {
return {
hello: "你好",
animal: {}
};
},
mounted() {
setTimeout(() => {
this.$set(this.animal, "name", "大象

Vue动态添加响应式属性的更多相关文章

  1. Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新

    一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vu ...

  2. Vue数据绑定和响应式原理

    Vue数据绑定和响应式原理 当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件.以 ...

  3. vue 声明响应式属性

    声明响应式属性 由于vue不允许动态添加根级响应式属性,所以你必须在初始化实例前声明根级响应式属性,哪怕只是一个空值: var vm = new Vue({ data: { // 声明 message ...

  4. Vue 响应式属性

    本文参考自:https://www.w3cplus.com/vue/vue-reactivity-and-pitfalls.html 1.概述 当创建一个Vue实例时,每个数据属性.组件属性等都是可以 ...

  5. vue组件上动态添加和删除属性

    1.vue组件上动态添加和删除属性 // 添加 this.$set(this.obj, 'propName', val) // 删除 this.$delete(this.obj, 'propName' ...

  6. vue学习之响应式原理的demo实现

    Vue.js 核心: 1.响应式的数据绑定系统 2.组件系统. 访问器属性 访问器属性是对象中的一种特殊属性,它不能直接在对象中设置,而必须通过 defineProperty() 方法单独定义. va ...

  7. VUE 动态给对象增加属性,并触发视图更新。

    在开发过程中,我们时常会遇到这样一种情况:当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. 根据官方文档定义 ...

  8. 学习 vue 源码 -- 响应式原理

    概述 由于刚开始学习 vue 源码,而且水平有限,有理解或表述的不对的地方,还请不吝指教. vue 主要通过 Watcher.Dep 和 Observer 三个类来实现响应式视图.另外还有一个 sch ...

  9. Vue的数据响应式

    getter和setter怎么用 示例代码 getter ,关键词为 get ,用于获取一个值.定义时为函数,但是使用时不用加括号. setter 用于对数据的改写 Object.defineProp ...

随机推荐

  1. dfs(魔力转圈圈)

    http://oj.jxust.edu.cn/contest/problem?id=1563&pid=4 题目描述 Storm有一个m行n列的整数矩阵. 他会从(1,1)开始,顺时针螺旋访问该 ...

  2. kotlin和vertx和mongo写的一个服务器验证登陆功能(很简陋)

    包结构长这个样子: server包:(服务器相关配置) HttpServer:用ver.x创建了一个http服务器,把接收到的req请求传入RPCRequest中: RPCRequest:解析请求bo ...

  3. CSS制作垂直口风琴2

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. Linux下创建虚VIP的方法及相互的区别:

    #创建虚VIPifconfig eth1:1 192.168.202.200 broadcast 192.168.202.255 netmask 255.255.255.0 up ip addr ad ...

  5. http的Content-Encoding和Content-Type及服务器和客户端处理流程

    比如,A 给 B发送了一条信息:hello,首先,A要告诉B,我给你发的这条数据的类型,不同类型的数据,接收方的处理方式不一样,hello属于文本类型,所以Content-Type就要设置成 text ...

  6. vue自定义指令获取焦点及过滤器修改时间

    <template id="comp3"> <div id="app"> <model :list="selectedl ...

  7. 2019-3-1-C#-json-转-xml-字符串

    title author date CreateTime categories C# json 转 xml 字符串 lindexi 2019-03-01 09:20:24 +0800 2019-1-1 ...

  8. 记一次 gunicorn 启动 flask 出问题的经历

    出错现象: gunicorn+nginx+flask 部署项目, 部署过程没问题,项目也正常启动了,但是一旦访问接口,就会报错: Traceback (most recent call last): ...

  9. Ansible笔记(1)---基本概念

    一.ansible的作用以及工作结构 1.1.ansible简介: ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func ...

  10. 学习旧岛小程序 (1) flex 布局

    css : view 相当于 div 块级元素 display 默认设置 block display:inline 设置后 设置宽度高度是无效的 要设置宽度高度 又要设置为行内元素 我们设置: (1) ...