vue 动态添加属性

2023-11-12

Vue.set 方法用于设置对象的属性,它可以解决 Vue 无法检测添加属性的限制,语法格式如下:

Vue.set( target, key, value )

参数说明:

  • target: 可以是对象或数组
  • key : 可以是字符串或数字
  • value: 可以是任何类型

----------------实例-------------------

<div id = "app">
   <p style = "font-size:25px;">计数器: {{ products.id }}</p>
   <button @click = "products.id++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
var myproduct = {"id":1, name:"book", "price":"20.00"};
var vm = new Vue({
   el: '#app',
   data: {
      counter: 1,
      products: myproduct
   }
});
Vue.delete(myproduct, 'price');
console.log(vm);
vm.$watch('counter', function(nval, oval) {
   alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue 动态添加属性 的相关文章

随机推荐

  • yolov3测试自己的数据

    yolov3测试自己的数据 前言 上一篇我已经介绍了利用yolov3预训练权重文件 只包含卷积层 并训练 只需要进行如下编译 darknet detector train cfg voc data cfg yolov3 cfg darkne
  • macOS 虚拟桌面黑屏(转)

    转自 macOS重置虚拟桌面 macOS 虚拟桌面黑屏 有几次出现如图的情况 以为是iTerm的问题 但是在关闭软件 重启之后 依旧无效 后面经过网友告知 才知道是虚拟桌面的问题 为了清理这个问题 有以下两种方法 法一 在终端输入以下命令
  • VC++闪退的两种解决方式(1然后选择“开始执行(不调试)“,也就是ctrl+F5;2system(“pause“);)

    这几天将开发集成环境换成了vs2010 刚开始用 有些地方不是很懂 通过查阅相关文档 现得以解决 就拿VS2010 调试窗口一闪而过解决方法如下 cpp view plain copy include
  • DAY2:leetcode977有序数组的平方 209 长度最小的子数组 59螺旋矩阵

    一 双指针法 O n 时间复杂度 有序数组的平方 一维数组初始化 vector
  • RTP时间戳概念

    RTP协议不依赖于底层协议 由于UDP包的快速 时实性高的特点 它通常和UDP结合在一起 作为UDP的上层载体数据的形式传播 typedef struct rtp header t uint32 t v 2 protocol version
  • Python基础(3)——PyCharm介绍

    Python基础 3 PyCharm介绍 文章目录 Python基础 3 PyCharm介绍 课程目标 一 PyCharm的作用 二 下载和安装 2 1 下载 2 2 安装 三 PyCharm基本使用 3 1 新建项目 3 2 新建文件并书
  • Qt::UserRole的作用

    Qt UserRole相当于一个索引的作用 对于一些Qt的组件有一个参数位置就需要Qt UserRole void QComboBox setItemData int index const QVariant value int role
  • 设计模式笔记1--单例模式

    设计模式笔记1 单例模式 1 单例模式介绍 Head First设计模式中解释 用来创建独一无二的 只能有一个实例的对象的入场券 即 该类只能有一个示例 其实现逻辑一般是 构造函数声明为private或protect防止被外部函数实例化 内
  • 数据学习(十四)-方差分析与试验设计

    1 方差分析引论 2 单因素方差分析 3 方差分析中的多重比较 4 双因素方差分析 5 试验设计初步 1 方差分析引论 方差分析是比较多个总体的均值是否相等 但本质上它所研究的是变量之间的关系 1 1 方差分析及其有关术语 检验多个总体均值
  • 离线图书推荐,使用sparkMLlib ALS协同过滤算法

    图书推荐 使用sparkMLlib ALS协同过滤算法 bookcrossing数据集 Scala语言 虚拟机ieda平台 代码参照HADOOP大数据实战权威指南第十一章 只能说算是能运行出结果了吧 package com csu impo
  • openGauss学习笔记-53 openGauss 高级特性-Ustore

    文章目录 openGauss学习笔记 53 openGauss 高级特性 Ustore 53 1 设计原理 53 2 核心优势 53 3 使用指导 openGauss学习笔记 53 openGauss 高级特性 Ustore Ustore
  • 2021-01-26Taming Transformers for High-Resolution Image Synthesis(arXiv2020)(有代码)

    转自 https blog csdn net amusi1994 article details 112301258 代码链接 https github com CompVis taming transformers 项目主页 https
  • C++中一个类成员函数调用另一个类成员的方法

    在继承之外 在C 中一个类成员函数调用另一个类成员的方法主要有 类的组合 友元类 类的前向声明 单例模式等 下面主要讲讲这4种方法的实现 方法1 利用类的组合 组合通俗来讲就是类B有类A的属性 如声明一个Person类 再声明一个Teach
  • 【前端面试题之Vue篇】(1)父子组件通信方式Props/$emit

    文章目录 前言 一 父组件向子组件传值 1 Props定义 2 Props 用法 1 路由里注册父子组件 2 父组件里引入子组件 并且注册子组件 3 子组件利用props接受父组件传过来的值 4 展示 二 子组件向父组件传值 1 emit
  • SegGPT_分割上下文中的所有内容

    文章目录 摘要 2 相关工作 2 1 视觉分割 2 2 视觉通才 2 3 上下文视觉学习 3 方法 3 1 上下文着色 3 2 上下文组合 3 3 在上下文中调优 4 实验 4 1 数据集 4 2 一阶段训练细节 4 3 定性结果 4 4
  • 30--子类对象的实例化过程

    在继承的操作中 对于子类的实例化也是有要求的 即子类对象在实例化之前必须首先调用父类中的构造方法 然后再调用子类自己的构造方法 实例1 定义父类 package com qwy bean public class Person privat
  • Django 快速搭建博客 第十节(修复首页,阅读量的数据)

    写到这里 我们已经使用django博客基础开发框架什么的快开发到底了 接下来的是django进阶阶段 难度会稍微大一些 这里主要是进行一些遗漏掉的地方的 1 我们博客的首页的点击事件未实现 2 文章的阅读量未填满 对于第一点 我们只要把相应
  • 排序算法概述与算法时间复杂度

    时间频度 算法的时间复杂度 常见的时间复杂度 注意 时间复杂度怎么理解呢 如果一段程序不会因为变量的规模而使得执行次数发生变化 那么时间复杂度就是O 1 比如下面这个代码就不会因为i 200000就会使得代码的执行次数变多 平均时间复杂度和
  • 参数错误。 (异常来自 HRESULT:0x80070057 (E_INVALIDARG))

    异常来自 HRESULT 0x80070057 E INVALIDARG 未能加载程序集 几次删除引用然后重新引用程序集还是报错 奔溃中 网上搜索还真有解决办法 解决方法 是 删除 C WINDOWS Microsoft NET Frame
  • vue 动态添加属性

    Vue set 方法用于设置对象的属性 它可以解决 Vue 无法检测添加属性的限制 语法格式如下 Vue set target key value 参数说明 target 可以是对象或数组 key 可以是字符串或数字 value 可以是任何