Vue-20、Vue.set()的使用

1、添加对象某个属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue.set()的使用</title><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="root"><h2>学校地址:{{address}}</h2><h2>学校名称:{{name}}</h2><hr/><h1 >学生信息</h1><button @click="addsex">点击添加学生性别</button><h2>学生名字:{{student.name}}</h2><h2 v-if="student.sex">性别:{{student.sex}}</h2><h2>学生真实年龄:{{student.age.rage}}</h2><h2>学生对外年龄:{{student.age.sage}}</h2><h2>学生朋友们</h2><h2><ul><li v-for="(p,index) in student.friends" :key="index"> {{p.name}}--{{p.age}}</li></ul></h2>
</div>
<script type="text/javascript">Vue.config.productionTip=false;const vm = new Vue({el:"#root",data:{address:'尚硅谷',name:'北京',student:{name: 'tom',age:{rage:40,sage:29},friends:[{name:'jeery',age:35},{name:'tony',age:36}]}},methods:{addsex(){Vue.set(this.student,'sex','男')}}})
</script>
</body>
</html>

2、另外一种写法

this.$set(this.student,'sex','男');

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/627832.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【SpringCloud】之Sentinel--服务容错的应用

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《SpringCloud开发之Sentinel--服务容错的应用》。…

qemu安装踩坑记(源码编译make版

qemu安装踩坑记&#xff08;源码编译make版 【写在前面】 本篇文章写于6.27号&#xff0c;发现写完但没发博客2333 大家好这里是β-AS&#xff0c;或者也可以喊我贝塔&#xff0c;或许也可也喊我be7a 没有人会永远学qemu&#xff0c;但永远会有人踩坑.jpg 依旧推荐一首歌 -1…

山东特产,乳山生蚝有话说

牡蛎&#xff0c;又叫生蚝&#xff0c;是无数吃货钟爱的海鲜美味。爱吃生蚝的法国人称之为“海中牛奶”&#xff0c;我国民间也有说法&#xff1a;“冬至到清明&#xff0c;蚝肉肥晶晶。”说的就是眼下&#xff0c;生蚝最肥美的冬春时节&#xff0c;也是“中国牡蛎之乡”山东乳…

深入理解Nginx:网络性能的极致优化

目录 引言Nginx的基本架构配置文件解析静态内容的处理反向代理和负载均衡SSL/TLS与HTTP/2支持动态内容的处理高级特性和模块性能调优Nginx与云计算和容器化安全性结论参考资源 引言 介绍Nginx的历史背景、优势、以及它在现代Web架构中的作用。 Nginx的基本架构 解释Nginx的事…

C# 介绍、应用领域、入门、语法、输出和注释详解

什么是 C#&#xff1f; C#&#xff08;发音为“C-Sharp”&#xff09;是一种由 Microsoft 创建的面向对象的编程语言&#xff0c;运行在 .NET Framework 上。源于 C 家族&#xff0c;与流行的语言如 C 和 Java 相近。首个版本发布于 2002 年&#xff0c;而最新版本&#xff0c…

༺༽༾ཊ—设计-七个-07-原则-模式—ཏ༿༼༻

第七原则&#xff1a;迪米特职责 类与类之间的耦合度尽可能低 换言之&#xff0c;我们可以理解成———只与直接朋友说话&#xff0c;不跟陌生人说话 直接朋友&#xff1a; 通过方法传参传进来的朋友&#xff0c; 类自己的字段&#xff0c; 构造函数进来的也是直接朋友&…

Centos系统安全设置

1 设置密码复杂度&#xff0c;帐号密码有效期3个月 密码复杂度要求&#xff1a;最小长度8位&#xff0c;至少2位大写字母&#xff0c;1位小写字母&#xff0c;4位数字&#xff0c;1位特殊字符 1&#xff09;执行备份&#xff1a; #cp -p /etc/login.defs /etc/login.defs_bak…

SpringBoot ObjectMapper 返回json 指定字段排序

当 JsonPropertyOrder用在类上, JsonProperty用在字段上时, JsonPropertyOrder优先级更高, JsonProperty不会生效JsonPropertyOrder({"code", "name"}) class Student{JsonProperty(value "name", index10) //index按绝对值从小到大排序privat…

vscode显示120字符或者80字符提示线或者显示垂直标尺

vscode显示120字符或者80字符提示线或者显示垂直标尺 一般规定一行代码不超过80或者120个字符。取决于团队的编码规范。 不同公司不同团队有不同的规定。 当单行代码过长。产生横向滚动条。使得代码难以阅读。 打开全局设置的settings.json /C:/Users/xxx/AppData/Roaming/Cod…

WinCC 输入/输出域没有所需要的预定义输出格式该怎么办?

WinCC 输入/输出域没有所需要的预定义输出格式该怎么办&#xff1f; 引文&#xff1a;博途工控人平时在哪里技术交流博途工控人社群 应该大多数人都知道 WinCC 的 IO 域对于浮点数的显示都支持格式预定义。 例如原数 567.89 可以在经过 IO 域的预定义后在画面上显示为 567.9&…

mybatis的#{}与${}区别(10分)

\#{}表示一个占位符号&#xff0c;#{}接收输入参数&#xff0c;类型可以是简单类型&#xff0c;pojo、hashmap。 如果接收简单类型&#xff0c;#{}中可以写成value或其它名称。 \#{}接收pojo对象值&#xff0c;通过OGNL读取对象中的属性值&#xff0c;通过属性.属性.属性...的…

TikTok电商加快闭环,独享IP为运营带来哪些好处?

近日有消息称TikTok电商在加快闭环&#xff0c;以后商家可能无法继续在TikTok上为其他电商平台或独立站引流了。如今“TikTok Shop Shopping Center”平台正在构建&#xff0c;将各种购物渠道整合为一体&#xff0c;这可能是一种趋势&#xff0c;意味着TikTok逐渐从社交应用转型…

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK设置硬件触发模式(C++)

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK设置硬件触发模式&#xff08;C&#xff09; Baumer工业相机Baumer工业相机NEOAPI SDK和硬件触发模式的技术背景Baumer工业相机通过BGAPISDK设置硬件触发模式功能1.引用合适的类文件2.通过BGAPISDK在Line0上施加12V/24V电压信号实…

Python-OpenCV教程丨从零开始学计算机视觉

文章目录 写在前面入门篇1.生成图片2.转换色彩空间3.拆分颜色通道4.绘制线条5.阈值自适应处理 写在后面 写在前面 探索新大陆&#xff1a;Python&OpenCV&#xff0c;本文主要记录入门计算机视觉的一些简单程序。 入门篇 安装opencv库&#xff1a; pip install -i https…

48 分布式id的生成策略

1.UUID 1.UUID (Universally Unique Identifier)&#xff0c;通用唯一识别码。UUID是基于当前时间、计数器&#xff08;counter&#xff09;和硬件标识&#xff08;通常为无线网卡的MAC地址&#xff09;等数据计算生成的。UUID由以下几部分的组合&#xff1a; 1.当前日期和时…

RabbitMQ脑裂处理

脑裂现象&#xff1a; Network partition detected Mnesia reports that this RabbitMQ cluster has experienced a network partition. There is a risk of losing data. Please read RabbitMQ documentation about network partitions and the possible solutions. 转载请在文…

缓存击穿,缓存穿透,缓存雪崩的原因和解决方案?

缓存穿透 缓存穿透是指缓存和数据库中都没有的数据&#xff0c;导致所有的请求都落到数据库上&#xff0c;造成数据库短时间内承 受大量请求而崩掉。 解决方案&#xff1a; 接口层增加校验&#xff0c;如用户鉴权校验&#xff0c;id做基础校验&#xff0c;id<0的直接拦截…

zotero使用gpt

zotero使用gpt 下载 zotero下载&#xff1a;https://www.zotero.org/download/ 插件下载&#xff1a;https://github.com/MuiseDestiny/zotero-gpt?tabreadme-ov-file 插件安装 zotero中选择 工具->添加组件 选择右上角的齿轮&#xff0c;选择Install add-on from fil…

NeRF算法原理总结概述

简介 本文旨在对NeRF算法进行总结。论文翻译见博客&#xff1a;《NeRF算法论文解析与翻译》 参考链接&#xff1a; 神经网络辐射场NeRF、实时NeRF Baking、有向距离场SDF、占用网络Occupancy、NeRF 自动驾驶 NeRF详解 NeRF入门之体渲染 (Volume Rendering) NeRF中的位置编码 …

C++力扣题目501--二叉搜索树中的众数

给你一个含重复值的二叉搜索树&#xff08;BST&#xff09;的根节点 root &#xff0c;找出并返回 BST 中的所有 众数&#xff08;即&#xff0c;出现频率最高的元素&#xff09;。 如果树中有不止一个众数&#xff0c;可以按 任意顺序 返回。 假定 BST 满足如下定义&#xf…