好资源导航 » 文章资讯 » vue下的@change事件的实现

vue下的@change事件的实现

2023-08-10 09:35:04 66

楼主最近在项目中实践了一下vue，期间遇到了一些坑，现在记录一下

先上代码





Title





请选择
{{province.text}}


请选择
{{city.text}}

如果按照平常的使用习惯，看起来好像没多大问题，切换父元素的时候监听change事件联动子元素值的变化，很符合常年使用jQuery开发的习惯，效果如图：

那如果页面上有多个使用到相同的联动效果的地方呢？我们看下效果会是怎样，如图


请选择
{{province.text}}


请选择
{{city.text}}


请选择
{{province.text}}


请选择
{{city.text}}

结果是互相受到影响,这并不是我们想看到的。

我的解决办法是，citys改为一个实时计算得到的数组而不是绑定现有仅有的同一个数组，代码改写如下：


请选择
{{city.text}}


getCity:function(id){
varcitys=this.areas.filter(function(city){
returncity.pid==id;
})
returncitys;
}

效果如下：

可以看到，现在已经不会互相影响了。

总结：类似vue的mvvm框架都是数据与视图双向绑定的，而change事件往往用于视图改变的时候去操作数据，这在mvvm框架里面显得多此一举，框架本身已映射视图的变化到数据上，所以绝大部分的change事件监听都是不必要的，对应vue，可改写为methods方法或者computed计算属性。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue下的@change事件的实现

热门推荐

随机推荐