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 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
使用HTML+CSS+JS制作简单的网页菜单界面
Jul 27 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
JS实现的简单表单验证功能示例
Oct 13 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
解决vue中使用proxy配置不同端口和ip接口问题
Aug 14 Javascript
在nuxt中使用路由重定向的实例
Nov 06 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
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
对google个性主页的拖拽效果的js的完整注释[转]
2007/04/10 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
Javascript:为input设置readOnly属性(示例讲解)
2013/12/25 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
轻松学习Javascript闭包函数
2015/12/15 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
详解React 在服务端渲染的实现
2017/11/16 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
[52:52]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第三局
2016/02/27 DOTA
python操作摄像头截图实现远程监控的例子
2014/03/25 Python
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
Tensorflow 多线程设置方式
2020/02/06 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
惠普新加坡官方商店:HP Singapore
2020/04/17 全球购物
房地产出纳岗位职责
2013/12/01 职场文书
干部现实表现材料
2014/02/13 职场文书
关于建议书的格式范文
2014/05/20 职场文书
会议接待欢迎标语
2014/10/08 职场文书
建筑安全员岗位职责
2015/02/15 职场文书
2015年工程师工作总结
2015/04/30 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
python cv2图像质量压缩的算法示例
2021/06/04 Python
教你用Java Swing实现自助取款机系统
2021/06/11 Java/Android
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技