vue下的@change事件的实现


Posted in Javascript onOctober 25, 2019

楼主最近在项目中实践了一下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开发的习惯,效果如图:

vue下的@change事件的实现

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

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

vue下的@change事件的实现

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

我的解决办法是,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下的@change事件的实现

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
Aug 28 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
JavaScript函数的4种调用方法详解
Apr 22 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
Vue封装的组件全局注册并引用
Jul 24 Javascript
微信小程序(订阅消息)功能
Oct 25 #Javascript
layui 解决form表单点击无反应的问题
Oct 25 #Javascript
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题
Oct 25 #Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 #Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 #Javascript
vue实现评论列表功能
Oct 25 #Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 #Javascript
You might like
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
smarty的保留变量问题
2008/10/23 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
javascript遍历控件实例详细解析
2014/01/10 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
2016/06/20 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
浅谈JavaScript find 方法不支持IE的问题
2017/09/28 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
小程序tab页无法传递参数的方法
2018/08/03 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
JavaScript事件循环及宏任务微任务原理解析
2020/09/02 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
python thread 并发且顺序运行示例
2009/04/09 Python
python+mysql实现简单的web程序
2014/09/11 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
联想英国官网:Lenovo英国
2019/07/17 全球购物
Python面试题:如何用Python来发送邮件
2016/03/15 面试题
自荐信包含哪些内容
2013/10/30 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
个人公开承诺书
2014/03/28 职场文书
节能标语大全
2014/06/21 职场文书
2014年教师节活动总结
2014/08/29 职场文书
消费者理赔投诉书
2015/07/02 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
MYSQL常用函数介绍
2022/05/05 MySQL