Vue.js系列教材 （八） |
您所在的位置：网站首页 › vuewatch监听data里的数据 › Vue.js系列教材 （八） |
Vue.js系列教材 （八）
|
Vue.js系列教材 （七）- vue.js 计算属性 computed的用法举例
Vue.js系列教材 （九）- 中使用过滤器
登录后可下载
工具版本兼容问题
步骤 1 : watch edit 顶 折 纠 问 请先登录 vue可以通过watch来监听属性值的变化。这是一个计算人民币对美元汇率的例子 运行效果 table tr td{ border:1px solid gray; padding:10px; } table{ border-collapse:collapse; width:800px; table-layout:fixed; } tr.firstLine{ background-color: lightGray; } 人民币 美元 汇率： ￥: $: new Vue({ el: '#div1', data: { exchange:6.4, rmb:0, dollar:0 }, watch:{ rmb:function(val) { this.rmb = val; this.dollar = this.rmb / this.exchange; }, dollar:function(val) { this.dollar = val; this.rmb = this.dollar * this.exchange; }, } }) 代码行数较多，请点击查看 
table tr td{
border:1px solid gray;
padding:10px;
}
table{
border-collapse:collapse;
width:800px;
table-layout:fixed;
}
tr.firstLine{
background-color: lightGray;
}
人民币
美元
汇率：
￥:
$:
new Vue({
el: '#div1',
data: {
exchange:6.4,
rmb:0,
dollar:0
},
watch:{
rmb:function(val) {
this.rmb = val;
this.dollar = this.rmb / this.exchange;
},
dollar:function(val) {
this.dollar = val;
this.rmb = this.dollar * this.exchange;
},
}
})
源代码 1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复 渲染中 渲染完成 效果 文件内容比较器 把你的代码复制到下面区域。 如果在线比较不好用，请使用客户端比较软件： diffmerge 下载和使用教程 复制代码代码高亮插件双击即可选中，不过部分同学反应，通过代码高亮插件复制的代码无法在IDEA里正常显示，这里提供TEXTAREA的方式，方便复制，谢谢 分享连接分享如下连接可增加积分，获取50%佣金 如果不方便发连接（如贴吧），可以使用如下由连接转换为的二维码. 鼠标在图片上右键，然后另存为即可 警告： 请勿使用挂机软件刷积分，刷积分不会导致任何注册量，很容易被识别。 一旦发现刷积分，即封号处理，请勿做吃力不讨好之事。 做练习的正确姿势 1. 自行完成练习 根据练习目标尽量自己实现代码效果，期间会碰到疑问，难题，和自己不懂的地方，这些都是必要的过程 2. 带着疑问查看答案 完成过程中，碰到无法解决的问题，带着疑问，查看答案，分析答案的解决思路 3. 查看答案讲解视频 依然有不明白的地方，点开视频讲解，带着疑问，听视频讲解有问题的部分 4. 再做一遍 理解后，再从头做一遍，把有疑问的地方都捋清楚 5. 总结 最后再总结一遍，总结思路，总结解决办法，以后遇到类似的问题，怎么处理 Vue.js系列教材 （八）- vue.js 通过watch 监听属性变化-总结笔记 把这时的想法，思路，研究都记录下来，等全部学完了，再回过头来巩固和理解，学习效果就会很好，知识点掌握得也牢固. 点击查看我的笔记 总结 代码 保存中预计需要秒 保存完成 保存失败，请联系站长 收藏本知识点有的同学收藏是为了进行标记,过段时间再来看不明白的地方,在此处可以记录哪里不明白. 单纯收藏的, 直接点击提交即可。 点击查看我的收藏 错误纠正专用站长比较马虎，难免出现错别字，如果发现哪里文字有误，请提交错误，站长会尽快修改，谢谢 Vue.js系列教材 （七）- vue.js 计算属性 computed的用法举例 Vue.js系列教材 （九）- 中使用过滤器 HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域 删除提问已经提交成功，正在审核, 谢谢. 回复提问已经提交成功，正在审核, 谢谢. 2021-04-29 watch代码块是怎么跑起来的啊，看不懂 up-bear 关于 前端部分-Vue.js-监听属性 的提问 问题 截图 代码 异常 写的两个函数我知道是传值计算的，但是搞不明白是怎么工作的，参数vai是什么鬼 watch:{ rmb:function(val) { this.rmb = val; this.dollar = this.rmb / this.exchange; }, dollar:function(val) { this.dollar = val; this.rmb = this.dollar * this.exchange; }, } 1 个答案 Buzzczars 跳转到问题位置 答案时间：2021-08-30 参数val就是事件发生后，对应元素的新值 请先登陆 回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢 删除提问已经提交成功，正在审核, 谢谢. 回复提问已经提交成功，正在审核, 谢谢. 2020-12-16 直观点。。。。。 很倒霉的死小孩 关于 前端部分-Vue.js-监听属性 的提问 问题 截图 代码 异常 浏览器打开开发者工具F12 new Vue({ el:"#div1", data:{ message:"任盈盈", person:{name:"张三",age:12}, }, watch:{ message(newValue,oldValue){ console.log("新值： "+newValue+" 旧值："+oldValue); }, }, })
请先登陆 回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢 删除提问已经提交成功，正在审核, 谢谢. 回复提问已经提交成功，正在审核, 谢谢. 2020-09-24 为啥要加this啊1，有this。rmb声明了=val，但另外两个在一个rmb方法里没声明啊！！ 峰峰QVQ 关于 前端部分-Vue.js-监听属性 的提问 rmb:function(val) { this.rmb = val; this.dollar = this.rmb / this.exchange; },
1 个答案 gugubird 跳转到问题位置 答案时间：2020-11-27 你可以理解为rmb是java中的Vue类的成员变量，this就是某个对象。 请先登陆 回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢 删除提问已经提交成功，正在审核, 谢谢. 回复提问已经提交成功，正在审核, 谢谢. 2020-09-11 $转￥ 南雄 关于 前端部分-Vue.js-监听属性 -watch 的提问 在$中输入数字123的时候，文本框中显示的不是123，而是12.0000000000000023 这是为啥？
1 个答案 LuzfeI 跳转到问题位置 答案时间：2020-09-14 我也是 ，眼一个 请先登陆 回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢 删除提问已经提交成功，正在审核, 谢谢. 回复提问已经提交成功，正在审核, 谢谢. 2020-09-04 这个监听重要程度大概是method必须熟练，computed会用，watch知道有这个东西就行了 妹妹有黑洞 关于 前端部分-Vue.js-监听属性 的提问 这个监听重要程度大概是method必须熟练，computed会用，watch知道有这个东西就行了
请先登陆 回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢 提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 5 条以前的提问，请 点击查看 提问之前请登陆 提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
【本文地址】
今日新闻 |
推荐新闻 |