<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> 修改fullname的值<input type="text" v-model = "fullname"> 修改shop的值<input type="number" v-model = "shop.price"> <hr> 人民币:<input type="number" v-model="rmb"> 美元:{{dollar}} </div> <script> let vm = new Vue({ el:'#app', data:{ fullname:'韦小宝', shop:{ name : 'OPPO R15', price: 3299 }, rmb:0, //人民币 dollar: 0 //美元 }, watch:{ rmb:function(newval){ // 用人民币数量除以6.8就可以得到对应的美元数量,然后用toFIXED保留2位小数 this.dollar=(newval / 6.8).toFixed(2) }, // 定义具体的监听属性 // 要监听哪个数据,那么监听属性的名称就命名为该数据的名称 fullname: function(newval,oldval){ // newval用于保存fullname的新值 // oldval用于保存fullname的旧值 console.log('fullname新值是什么' + newval +',旧值' + oldval) }, // 对象类型的数据进行常规监听是无法监听到数据变化的 // shop:function(newval,oldval){ // console.log('shop新值是' + newval + ',旧值是' + oldval) // }, // 对对象类型的数据进行监听必须采用深度监听的方法 shop:{ // 打开深度监听选项 deep:true, handler:function(newval,oldval){ // newva保存对象属性的新值 // oldva保存对象属性的旧值 console.log('shop新值是' + newval.name+''+newval.price) } } } }) </script> </body> </html>
vue.js事件监听属性01
2022-11-08
113
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
vue.js事件监听属性01
相关文章
|
1月前
|
JavaScript
前端开发
程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素，但是它们之间有些细微的差别，稍不注意，就很容易弄错！
44
1
1
|
2月前
|
JavaScript
VUE学习二：事件监听(v-on)、条件判断(v-if/v-else-if/v-else)、循环遍历(v-for)
这篇文章是关于Vue.js的学习指南，涵盖了事件监听、条件判断、循环遍历、数组方法响应性、案例分析以及高阶函数的使用。
65
2
2
|
1月前
|
监控
JavaScript
前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中，需要通过测试和验证来确定最适合的加载方式，以提供更好的用户体验和页面性能。
90
56
56
|
1月前
|
存储
缓存
JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
48
7
7
|
1月前
|
监控
JavaScript
前端开发
使用 `defer` 属性异步加载 JavaScript
【10月更文挑战第24天】使用 `defer` 属性异步加载 JavaScript 是一种有效的提高页面性能和用户体验的方法。通过合理设置 `defer` 属性，可以在不影响页面渲染的情况下异步加载脚本，并确保脚本的执行顺序。在实际应用中，需要根据具体情况选择合适的加载方式，并注意处理可能出现的问题，以确保页面能够正常加载和执行。
24
1
1
|
2月前
|
JavaScript
API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示（开发Search组件）】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示（开发Search组件）】
62
1
1
|
2月前
|
监控
JavaScript
开发者
在 Vue 中，子组件为何不可以修改父组件传递的 Prop，如果修改了，Vue 是如何监控到属性的修改并给出警告的
在 Vue 中，子组件不能直接修改父组件传递的 Prop，以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop，Vue 会通过响应式系统检测到这一变化，并在控制台发出警告，提示开发者避免这种操作。
143
3
3
|
2月前
|
移动开发
JavaScript
前端开发
|
2月前
|
JavaScript
前端开发
开发者
VUE学习一：初识VUE、指令、动态绑定、计算属性
这篇文章主要介绍了Vue.js的基础知识，包括初识Vue、指令如v-for、v-on的使用、动态属性绑定（v-bind）、计算属性等概念与实践示例。
65
1
1
|
2月前
|
缓存
JavaScript
前端开发
热门文章
最新文章
1
VS Code书写vue项目配置 eslint+prettier 统一代码风格
2
Nestjs+Vue实现阿里云OSS服务端签名直传
3
【Ant Design Vue V3版本填坑记录一】Table 组件 column.slots 报错
4
基于Serverless函数计算FC一键搭建VUE3.0脚手架
5
vue之webpack打包原理和用法详解
6
浏览器垃圾回收机制与 Vue 项目内存泄漏分析
7
VUE3中watch与watchEffect —— 全网最详细系列
8
自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
9
中文代码示例之Vuejs入门教程(一)
10
新建Vue项目
1
JavaScript中的异步编程方法总结
46
2
从零开始学习Vue.js
49
3
采用java+springboot+vue.js+uniapp开发的一整套云MES系统源码 MES制造管理系统源码
107
4
React和Next.js开发常见的HTTP请求方法
134
5
JavaScript新科技：PostCSS的安装和使用，2024年最新2024网易Web前端高级面试题总结
68
6
JavaScript数据类型归纳，架构师花费近一年时间整理出来的前端核心知识
44
7
前端 JS 经典：ES6 和 CommonJs 用法
49
8
前端 JS 经典：宏任务、微任务、事件循环（EventLoop）
67
9
前端 JS 经典：JSON 对象
48
10
前端 JS 经典：递归
43