vue下的@change事件的实现
更新时间：2019年10月25日 14:16:53 作者：RobertCrazying
这篇文章主要介绍了vue下的@change事件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
楼主最近在项目中实践了一下vue，期间遇到了一些坑，现在记录一下
先上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="vue.js"></script>
<body>
<div id="app">
<select name="" id="" @change="getCity(provinceId)" v-model="provinceId">
<option value="">请选择</option>
<option v-for="province in provinces" :value="province.id">{{province.text}}</option>
</select>
<select name="" id="">
<option value="">请选择</option>
<option :value="city.id" v-for="city in citys">{{city.text}}</option>
</select>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
provinces:[],
provinceId:'',
citys:[],
areas:[]
},
created:function() {
this.areas = [
{text:'广东省',id:1,pid:0},
{text:'上海市',id:2,pid:0},
{text:'广州市',id:11,pid:1},
{text:'中山市',id:12,pid:1}
];
var provinces=this.areas.filter(function (area) {
return area.pid == 0;
});
this.provinces = provinces;
},
methods:{
getCity:function (id) {
var citys=this.areas.filter(function (city) {
return city.pid == id;
})
this.citys = citys;
}
}
})
</script>
</html>
如果按照平常的使用习惯，看起来好像没多大问题，切换父元素的时候监听change事件联动子元素值的变化，很符合常年使用jQuery开发的习惯，效果如图：
那如果页面上有多个使用到相同的联动效果的地方呢？我们看下效果会是怎样，如图
<select name="" id="" @change="getCity(provinceId)" v-model="provinceId">
<option value="">请选择</option>
<option v-for="province in provinces" :value="province.id">{{province.text}}</option>
</select>
<select name="" id="">
<option value="">请选择</option>
<option :value="city.id" v-for="city in citys">{{city.text}}</option>
</select>
<select name="" id="" @change="getCity(provinceId)" v-model="provinceId">
<option value="">请选择</option>
<option v-for="province in provinces" :value="province.id">{{province.text}}</option>
</select>
<select name="" id="">
<option value="">请选择</option>
<option :value="city.id" v-for="city in citys">{{city.text}}</option>
</select>
结果是互相受到影响,这并不是我们想看到的。
我的解决办法是，citys改为一个实时计算得到的数组而不是绑定现有仅有的同一个数组，代码改写如下：
<select name="" id="">
<option value="">请选择</option>
<option :value="city.id" v-for="city in getCity(provinceId)">{{city.text}}</option>
</select>
getCity:function (id) {
var citys=this.areas.filter(function (city) {
return city.pid == id;
})
return citys;
}
效果如下：
可以看到，现在已经不会互相影响了。
总结：类似vue的mvvm框架都是数据与视图双向绑定的，而change事件往往用于视图改变的时候去操作数据，这在mvvm框架里面显得多此一举，框架本身已映射视图的变化到数据上，所以绝大部分的change事件监听都是不必要的，对应vue，可改写为methods方法或者computed计算属性。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue如何判断dom的class,vue点击给dom添加class然后获取含有class的dom文件，具体内容详情大家参考下本文2018-04-04
这篇文章主要介绍了vue3中reactive和ref函数及对比,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2024-01-01
这篇文章主要介绍了移动端Vue2.x Picker的全局调用实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
Vue3 setup语法糖销毁一个或多个定时器(setTimeout/setInterval)
这篇文章主要给大家介绍了关于Vue3 setup语法糖销毁一个或多个定时器(setTimeout/setInterval)的相关资料,vue是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可,需要的朋友可以参考下2023-10-10
在vuejs中使用axios时,有时候需要追加数据,比如,移动端下拉触底加载,分页加载,滑动滚动条等,下面小编就来为大家介绍一下如何使用使用axios实现动态追加数据吧2023-10-10
本文主要介绍了Element Plus实现Affix 固钉，Affix组件用于将页面元素固定在特定可视区域，文中通过示例代码介绍的非常详细，感兴趣的小伙伴们可以参考一下2021-07-07
这篇文章主要介绍了vue 使用vant插件做tabs切换和无限加载功能的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
下面小编就为大家分享一篇在vue中封装可复用的组件方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue中对window.openner的使用,vue使用window.open()跳转页面的代码案例，本文通过实例代码给大家详细讲解，需要的朋友可以参考下2022-11-11
在本篇文章里小编给大家整理的是关于vue按需加载实例的相关知识点内容，有需要的朋友们可以学习参考下。2019-09-09
最新评论