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开发的习惯，效果如图：

image.png

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

        <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>

image.png

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

我的解决办法是，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;}

效果如下：

image.png

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

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

vue下的@change事件相关推荐

vue 事件调用传参_对vue下点击事件传参和不传参的区别详解
如下所示: {{btn_text1}} {{btn_text2}} var _vm = new Vue({ data : { btn_text1 : '点击1' , btn_text2 : '点击2' ...
click传值vue_对vue下点击事件传参和不传参的区别详解
如下所示: {{btn_text1}} {{btn_text2}} var _vm = new Vue({ data : { btn_text1 : '点击1' , btn_text2 : '点击2' ...
Vue下 touchstart touchend 事件无效失效解决办法
Vue下 touchstart touchend 事件无效失效解决办法 <van-button:disabled="isLoading"plaintype="inf ...
Vue的自定义@change事件（自己学习用途，不建议参考）
html dom事件虽然我会用Vue会写一些组件和组件但是,有一些细节需要自己去扣,比如说我写项目的时候,遇到问题,那个change事件我就不是很清楚.我就去百度后面才发现,change事件是组件里 ...
vue下拉框值改变事件_vue下的@change事件
楼主最近在项目中实践了一下vue,期间遇到了一些坑,现在记录一下先上代码 Title 请选择 {{province.text}} 请选择 {{city.text}} new Vue({ el:'#a ...
vue下拉框值改变事件_vue和element ui 下拉框select的change事件
1 在线编辑测试工具编辑好代码后点击 run 即可 2 vue原生写法 2.1 html部分新增空 {{ drug.name }} 刪除尚未新增任何資料總金額:{{ totalMoney } ...
vue下拉框值改变事件_下拉框的change事件
$(document).ready(function() { //绑定下拉框change事件,当下来框改变时调用 SelectChange()方法 $("#selectID").c ...
vue、Dropdown 下拉菜单、Dropdown属性事件、vue Dropdown 全部下拉菜单、vue Dropdown 全部属性事件
vue.Dropdown 下拉菜单.Dropdown属性事件.vue Dropdown 全部下拉菜单.vue Dropdown 全部属性事件设计规则何时使用代码演示 1.基本 2.右键菜单 3. ...
vue：添加enter事件，键盘敲下enter事件
vue项目中遇到点击查询按钮可以查出数据,点击回车键也能查出数据,所以就想点击回车键时调用查询方法. 示例代码如下: 一.第一步: 给input按钮绑定@keyup.enter:如果是要对页面的but ...

vue下的@change事件

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

vue下的@change事件相关推荐

最新文章

热门文章