13_总结Vue数据监测
总结：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>总结Vue数据监测</title>
8 <script type="text/javascript" src="../js/vue.js"></script>
9
10 </head>
11 <!-- 准备好一个容器 -->
12 <div id="root">
13 <h1>学生信息</h1>
14 <button @click="student.age++">年龄+1</button><br/><br/>
15 <button @click="addSex">添加性别属性，默认值：男</button><br/><br/>
16 <button @click="student.sex = '未知' ">修改性别</button><br/><br/>
17 <button @click="addFriend">在首位置添加一个朋友</button><br/><br/>
18 <button @click="updateFirstFriendName">修改第一个朋友的名字为:猪八戒</button><br/><br/>
19 <button @click="addHobby">添加一个爱好</button><br/><br/>
20 <button @click="updateFirstHobby">修改第一个爱好为：敲代码</button>
21 <h3>姓名：{{student.name}}</h3>
22 <h3>年龄：{{student.age}}</h3>
23 <h3 v-show="student.sex">性别：{{student.sex}}</h3>
24 <h3>爱好：</h3>
25 <ul>
26 <li v-for="(h,index) in student.hobby" :key="index">
27 {{h}}
28 </li>
29 </ul>
30 <h3>朋友们：</h3>
31 <ul>
32 <li v-for="(f,index) in student.friends" :key="index">
33 {{f.name}}--{{f.age}}
34 </li>
35 </ul>
36 </div>
37 </body>
38 <script type="text/javascript">
39 Vue.config.productionTips = false //阻止vue在启动时生成生产提示
40 const vm = new Vue({
41 el:"#root",
42 data:{
43 student:{
44 name:'tom',
45 age:18,
46 hobby:['逛街','打球','k歌'],
47 friends:[
48 {name:'tony',age:22},
49 {name:'jerry',age:28},
50 ]
51 }
52 },
53 methods: {
54 addSex(){
55 // Vue.set(this.student,'sex','男')
56 this.$set(this.student,'sex','男')
57 },
58 addFriend(){
59 this.student.friends.unshift({name:'nancy',age:'30'})
60 },
61 updateFirstFriendName(){
62 this.student.friends[0].name = '猪八戒'
63 },
64 addHobby(){
65 this.student.hobby.push('学习')
66 },
67 updateFirstHobby(){
68 //this.student.hobby.splice(0,1,'敲代码')
69 //Vue.set(this.student.hobby,0,'敲代码')
70 this.$set(this.student.hobby,0,'敲代码')
71 }
72 },
73 })
74 </script>
75 </html>
13_总结Vue数据监测的更多相关文章
- vue 中监测滚动条加载数据（懒加载数据）
vue 中监测滚动条加载数据(懒加载数据) 1:钩子函数监听滚动事件: mounted () { this.$nextTick(function () { window.addEventListene ...
- 利用InfluxDB和Grafana搭建数据监测的仪表盘
InfluxDB的介绍及安装 InfluxDB是支持持续写入的时序数据库,常用于监测系统所需要的数据的存储. 官网的详细安装步骤 https://docs.influxdata.com/influxd ...
- 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
- 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定
前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...
- 由自定义事件到vue数据响应
前言 除了大家经常提到的自定义事件之外,浏览器本身也支持我们自定义事件,我们常说的自定义事件一般用于项目中的一些通知机制.最近正好看到了这部分,就一起看了下自定义事件不同的实现,以及vue数据响应的基 ...
- Vue 数据响应式原理
Vue 数据响应式原理 Vue.js 的核心包括一套“响应式系统”.“响应式”,是指当数据改变后,Vue 会通知到使用该数据的代码.例如,视图渲染中使用了数据,数据改变后,视图也会自动更新. 举个简单 ...
- vue数据双向绑定原理
vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...
- vue数据传递--我有特殊的实现技巧
最近碰到了比较多的关于vue的eventBus的问题,之前定技术选型的时候也被问到了,vuex和eventBus的使用范围.所以简单的写一下.同时有一种特殊的实现方案. 有这么几种数据传递方式,vue ...
- vue数据双向绑定的原理、虚拟dom的原理
vue数据双向绑定的原理https://www.cnblogs.com/libin-1/p/6893712.html 虚拟dom的原理https://blog.csdn.net/u010692018/ ...
随机推荐
- 提升UE5写实效果的项目设置
随着虚幻引擎5(Unreal Engine 5,简称UE5)的发布,游戏开发者和数字艺术家们迎来了一个全新的机会,可以在其强大的渲染引擎下创建更加逼真和令人惊叹的游戏和虚拟场景.然而,要实现出色的写实 ...
- npm ERR! code 1 npm ERR! path E:\20231213\vue-element-admin\node_modules\node-sass npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
执行npm install报错,根据下面报错信息可知,是由于nodejs和node-sass版本不一致造成的,也就是当前项目比较旧,而我安装的nodejs比较新. PS E:\20231213\vue ...
- 鸿蒙HarmonyOS实战-ArkUI组件（GridRow/GridCol）
一.GridRow/GridCol 1.概述 栅格布局是一种通用的辅助定位工具,可以帮助开发人员解决多尺寸多设备的动态布局问题.通过将页面划分为等宽的列数和行数,栅格布局提供了可循的规律性结构,方便开 ...
- FPGA中的速度优化
FPGA中的速度优化 一.逻辑设计中的速度概念 逻辑设计速度相关的概念有三个:设计吞吐量.设计延时和设计时序.速度优化策略而言,吞吐量需要提高,延时应该降低,时序应该收敛(时序余量slave越大,收敛 ...
- KingbaseES 物理备库影响主库的性能与垃圾回收
前言 KingbaseES 物理备库有些配置可能影响到主库性能,或者反过来说主库某些配置也会影响到备库.终极原因还是heap tuple 和dead tuple放在一起导致的. 首先,原理上讲,物理备 ...
- KingbaseES V8R6运维案例之---pg_statistic toast表故障修复
案例说明: 数据库在日常的维护过程中,执行表结构查询语句(\d t1),如下图所示,出现"missing chunk number 0 for toast value 16259 in ...
- KingbaseES KWR中等待事件分析案例
背景 昨天有现场同事碰到了一个现象,一条简单的update语句运行缓慢.单独运行没有问题,在特定时间运行就会非常缓慢,怀疑是业务系统特殊逻辑导致数据库有阻塞引发的update语句慢的现象.故此现场同事 ...
- HashMap的三种遍历方式--Java--小白必懂
初学Hash Map总感觉它的遍历很麻烦,其实看懂后总结一下就是:集合+泛型,没啥特别的 总结一下HashMap的三种遍历方法如下: 保证一看就会>>> 1 // 对HashMap的 ...
- 鸿蒙HarmonyOS实战-ArkUI组件（Grid/GridItem）
一.Grid/GridItem 1.概述 网格布局是一种新型的布局方式,它按照网格来划分页面,通过列和行来定义网格,使得页面的布局更加灵活.简洁.易于维护.网格布局能够将页面分成多个单元格,可以在这些 ...
- archlinux xfce 出现[FAILED] Failed to mount /boot, systemctl status boot.mount出现 mount: /boot: unknown filesystem type 'vfat' 滚挂了
开机显示:[FAILED] Failed to mount /boot 使用命令systemctl status boot.mount后出现 mount: /boot: unknown filesys ...