Vue22 Vue监测数据改变的原理_数组

实例

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Vue监测数据改变的原理_数组</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h1>学校信息</h1><h2>学校名称:{{school.name}}</h2><h2>学校地址:{{school.address}}</h2><h2>校长是:{{school.leader}}</h2><hr/><h1>学生信息</h1><button @click="addSex">添加一个性别属性,默认值是男</button><h2>姓名:{{student.name}}</h2><h2 v-if="student.sex">性别:{{student.sex}}</h2><h2>年龄:真实{{student.age.rAge}},对外{{student.age.sAge}}</h2><h2>爱好</h2><ul><li v-for="(h,index) in student.hobby" :key="index">{{h}}</li></ul><h2>朋友们</h2><ul><li v-for="(f,index) in student.friends" :key="index">{{f.name}}--{{f.age}}</li></ul></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。const vm = new Vue({el:'#root',data:{school:{name:'尚硅谷',address:'北京',},student:{name:'tom',age:{rAge:40,sAge:29,},hobby:['抽烟','喝酒','烫头'],friends:[{name:'jerry',age:35},{name:'tony',age:36}]}},methods: {addSex(){// Vue.set(this.student,'sex','男')this.$set(this.student,'sex','男')}}})</script>
</html>

在这里插入图片描述

笔记

直接通过索引改变数组的值不生效,需要使用Vue封装好的以下方法,操作数组。
在这里插入图片描述

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

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

相关文章

fish终端下conda activate失败

【问题】fish终端下激活conda环境报错&#xff1a; >> conda activate base CondaError: Run conda init before conda activate ## 然而运行 conda init fish 仍旧无法解决【解决】 参考&#xff1a;https://github.com/conda/conda/issues/11079 方法一&#xf…

log_error_verbosity参数详解

参数说明 控制每条日志信息的详细程度。 默认: log_error_verbosity = default , terse、default、verbose三选一 terse模式下,返回的消息只包括严重性、主要文本以及位置;这些东西通常放在一个单一行中。 default模式生成的消息包括上面的信息加上任何细节、提示或者…

2024.02.18作业

1. 使用fgets统计给定文件的行数 #include <stdio.h> #include <stdlib.h> #include <string.h>int main(int argc, char const *argv[]) {if (argc ! 2){puts("input file error");puts("usage:./a.out filename");return -1;}FILE* f…

SMT2020:半导体制造流程标准仿真测试数据介绍

文章目录 问题背景SMT2020 涉及的主要功能1. 包含多种仿真模型类型2. 包含非计划性动作3. 区分不同类型设备的加工速率4. 特殊的复杂操作SMT2020 数据概览1. AutoSched 仿真模型数据2. General Data 输入数据问题背景 在半导体的生产制造当中,由于晶元片及设备等的高价值性,…

CSP-201812-1-小明上学

CSP-201812-1-小明上学 解题思路 #include <iostream> using namespace std; int main() {int red, yellow, green, n, timeSum 0;cin >> red >> yellow >> green;cin >> n;for (int i 0; i < n; i){int flag, time;cin >> flag &g…

分享视频二维码如何生成?怎么让其他人扫码查看自己的视频?

现在很多展示性的视频都会通过生成二维码的方式来传播分享&#xff0c;选择二维码的方式来分享能够更加快捷的获取视频内容&#xff0c;让更多人可以同时查看&#xff0c;有效提高视频传播的速度和效率。那么怎么制作视频二维码呢&#xff1f;其实方法很简单&#xff0c;只需要…

lvs DR模式+基于五台服务器部署keepalived + lvs DR模式架构(前端带路由)负载均衡的高可用集群

lvs DR模式基于五台服务器部署keepalived lvs DR模式架构(前端带路由)负载均衡的高可用集群 DR模式一&#xff1a; 客户端&#xff1a;172.20.26.167 LVS服务器&#xff1a;172.20.26.198 后端服务器&#xff1a;172.20.26.218 后端服务器&#xff1a;172.20.26.210 两台…

三勾点餐系统源码,java后台+微信小程序 实现完整的餐厅点餐

三勾点餐系统基于javaspringbootelement-plusuniapp打造的面向开发的小程序商城&#xff0c;方便二次开发或直接使用&#xff0c;可发布到多端&#xff0c;包括微信小程序、微信公众号、QQ小程序、支付宝小程序、字节跳动小程序、百度小程序、android端、ios端。 功能介绍 1.…

【牛客面试必刷TOP101】Day23.BM27 按之字形顺序打印二叉树和BM30 二叉搜索树与双向链表

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;牛客面试必刷TOP101 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01;&…

java中的数据结构及数据类型转换

基本数据类型&#xff08;4类8种&#xff09; 数据类型关键字内存占用取值范围说明字节byte1个字节-128 ~ 127短整型short2个字节-32768 ~ 32767整型int&#xff08;默认&#xff09;4个字节-231 ~ 231-1&#xff08;21个亿&#xff09;长整型long8个字节-263 ~ 263-&#xff…

在字节划水的7年,太真实了。。

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 测试这条路是坎坷的&#xff0c;我自己深有体会。 我们的起点低…

高并发系统:常见的设计思路

高并发的书籍文章其实有很多&#xff0c;我们工作中也或多或少遇到过一些。今天这里总结下常见的思路。 一&#xff0c;分而治之。 这个是最容易想到的办法&#xff0c;这里面包含了几层思路。 1&#xff0c;产品设计。业务上就引导用户分开使用&#xff0c;按需购买&#xff…

力扣题目训练(15)

2024年2月8日力扣题目训练 2024年2月8日力扣题目训练507. 完美数520. 检测大写字母521. 最长特殊序列 Ⅰ221. 最大正方形237. 删除链表中的节点115. 不同的子序列 2024年2月8日力扣题目训练 2024年2月8日第十五天编程训练&#xff0c;今天主要是进行一些题训练&#xff0c;包括…

ViT: transformer在图像领域的应用

文章目录 1. 概要2. 方法3. 实验3.1 Compare with SOTA3.2 PRE-TRAINING DATA REQUIREMENTS3.3 SCALING STUDY3.4 自监督学习 4. 总结参考 论文&#xff1a; An Image is Worth 16x16 Words: Transformers for Image Recognition at Scale 代码&#xff1a;https://github.com…

C++中的constexpr

C中的constexpr 什么是constexpr&#xff1f; 在C中&#xff0c;constexpr是一个关键字&#xff0c;它用于声明常量表达式。这些表达式在编译时被计算&#xff0c;而不是在运行时。这意味着constexpr可以用于任何需要在编译时知道值的地方&#xff0c;例如数组的大小或模板参…

Python爬虫详解(一看就懂)

爬虫 爬虫是什么 爬虫简单的来说就是用程序获取网络上数据这个过程的一种名称。 爬虫的原理 如果要获取网络上数据&#xff0c;我们要给爬虫一个网址&#xff08;程序中通常叫URL&#xff09;&#xff0c;爬虫发送一个HTTP请求给目标网页的服务器&#xff0c;服务器返回数据…

机器学习---规则学习(序贯覆盖、单条规则学习、剪枝优化)

1. 序贯覆盖 回归&#xff1a; 分类&#xff1a; 聚类&#xff1a; 逻辑规则&#xff1a; 读作&#xff1a;若&#xff08;文字1且文字2且...&#xff09;&#xff0c;则目标概念成立 规则集&#xff1a;充分性与必要性&#xff1b;冲突消解&#xff1a;顺序规则、缺省规则…

nacos 2.3.1-SNAPSHOT 源码springboot方式启动(详细)附改造工程地址

文章时间是2024-2-18日&#xff0c;nacos默认develop分支&#xff0c;最新版是2.3.1-SNAPSHOT版本。 我们这里就以nacos最新版进行改造成springboot启动方式。 1. Clone 代码 nacos github地址&#xff1a;https://github.com/alibaba/nacos.git 根据上面git地址把源码克隆到…

【模板】负环 问题题解(spfa和bellman解决)

P3385 【模板】负环 题目描述 给定一个 n 个点的有向图&#xff0c;请求出图中是否存在从顶点 11 出发能到达的负环。 负环的定义是&#xff1a;一条边权之和为负数的回路。 输入格式 本题单测试点有多组测试数据。 输入的第一行是一个整数 T&#xff0c;表示测试数据的组…

[ai笔记10] 关于sora火爆的反思

欢迎来到文思源想的ai空间&#xff0c;这是技术老兵重学ai以及成长思考的第10篇分享&#xff01; 最近sora还持续在技术圈、博客、抖音发酵&#xff0c;许多人都在纷纷发表对它的看法&#xff0c;这是一个既让人惊喜也感到焦虑的事件。openai从2023年开始&#xff0c;每隔几个…