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计算属性。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
TypeError:res.forEach is not a function报错解决办法
这篇文章主要给大家介绍了关于TypeError:res.forEach is not a function报错的解决办法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
今天小编就为大家分享一篇关于vue.js中实现方法内某些代码延时执行，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家介绍了vue项目网站全局置灰功能实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要给大家介绍了关于vue项目history模式刷新404问题的解决办法,需要的朋友可以参考下2023-11-11
这篇文章主要介绍了Ant Design Vue 修改表格头部样式,首先用到的是customHeaderRow这个API，类型是一个函数，本文通过完整代码给大家详细讲解，需要的朋友可以参考下2022-10-10
vue异步组件与组件懒加载问题(import不能导入变量字符串路径)
这篇文章主要介绍了vue异步组件与组件懒加载问题(import不能导入变量字符串路径)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文主要介绍了vue实现页面div盒子拖拽排序功能，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
本节，我们将讨论关于AST的转换。所谓AST的转换，指的是对AST进行一系列操作，将其转换为新的AST的过程。新的AST可以是原语言或原DSL的描述，也可以是其他语言或其他DSL的描述。例如，我们可以对模板AST进行操作，将其转换为JavaScriptAST2023-01-01
这篇文章主要介绍了vue页面加载闪烁问题的解决方法,文中给大家提到了v-if 和 v-show 的区别，解决vue页面加载时出现{{message}}闪退的两种方法，感兴趣的朋友一起看看吧2018-03-03
这篇文章主要为大家详细介绍了vue开发实现评论列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论