<!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
110
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
vue.js事件监听属性01
相关文章
|
1月前
|
JavaScript
VUE学习二：事件监听(v-on)、条件判断(v-if/v-else-if/v-else)、循环遍历(v-for)
这篇文章是关于Vue.js的学习指南，涵盖了事件监听、条件判断、循环遍历、数组方法响应性、案例分析以及高阶函数的使用。
55
2
2
|
15天前
|
监控
JavaScript
前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中，需要通过测试和验证来确定最适合的加载方式，以提供更好的用户体验和页面性能。
85
56
56
|
4天前
|
存储
缓存
JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
17
7
7
|
15天前
|
监控
JavaScript
前端开发
使用 `defer` 属性异步加载 JavaScript
【10月更文挑战第24天】使用 `defer` 属性异步加载 JavaScript 是一种有效的提高页面性能和用户体验的方法。通过合理设置 `defer` 属性，可以在不影响页面渲染的情况下异步加载脚本，并确保脚本的执行顺序。在实际应用中，需要根据具体情况选择合适的加载方式，并注意处理可能出现的问题，以确保页面能够正常加载和执行。
10
1
1
|
1月前
|
JavaScript
API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示（开发Search组件）】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示（开发Search组件）】
51
1
1
|
30天前
|
监控
JavaScript
开发者
在 Vue 中，子组件为何不可以修改父组件传递的 Prop，如果修改了，Vue 是如何监控到属性的修改并给出警告的
在 Vue 中，子组件不能直接修改父组件传递的 Prop，以确保数据流的单向性和可预测性。如果子组件尝试修改 Prop，Vue 会通过响应式系统检测到这一变化，并在控制台发出警告，提示开发者避免这种操作。
46
3
3
|
1月前
|
移动开发
JavaScript
前端开发
|
2月前
|
缓存
JavaScript
前端开发
vue-day02计算属性,v-bind,v-if,v-for
文章介绍了Vue.js中的计算属性、class与style的绑定、条件渲染和列表渲染的使用。通过示例代码展示了如何使用计算属性简化模板逻辑、如何通过v-bind动态绑定class和style、如何使用v-if进行条件渲染以及如何使用v-for进行列表渲染。这些特性使得Vue.js在构建动态用户界面时更加灵活和强大。
33
1
1
|
1月前
|
JavaScript
前端开发
开发者
VUE学习一：初识VUE、指令、动态绑定、计算属性
这篇文章主要介绍了Vue.js的基础知识，包括初识Vue、指令如v-for、v-on的使用、动态属性绑定（v-bind）、计算属性等概念与实践示例。
60
1
1
|
1月前
|
缓存
JavaScript
前端开发
热门文章
最新文章
1
vite 如何做到让 vue 本地开发更快速？
2
Vue 3和Element组件库的分页功能实现
3
Vue $watch监听对象属性，数组内对象属性改变
4
一文梳理Vue3核心原理
5
Vue打包后页面出现空白解决办法（臻享版）
6
【ElementUI】Vue+ElementUI多文件上传，一次请求上传多个文件！
7
自制简单的range（Vue）
8
vite原理之解析.vue文件
9
vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
10
Vue小项目01——标签记录器
1
前端框架与库 - Vue.js基础：模板语法、数据绑定
134
2
《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
262
3
js【详解】arr.reduce() 数组缩减
46
4
【vue】 vue2 | js 实现数字滚动效果
106
5
【vue】 网站动态背景 | vanta.js的使用
411
6
JavaScript进阶-JavaScript库与框架简介
58
7
DVWA JavaScript 通关解析
67
8
WEB三大主流框架之Vue.js
45
9
断网之后的页面，Autox.js是点击还是上下滑动比较好？
60
10
autox.js如何监听异常情况，比如网络中断、内存慢、应用死机或者页面无响应
217