vue下的@change事件的实现

2024-12-24 02:01:56

楼主最近在项目中实践了一下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计算属性。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

详解mpvue中使用vant时需要注意的onChange事件的坑

最近用了一下Vant Weapp组件库,但是由于我是用mpvue写的,所以自然跟小程序引用不一样,比如我最近引用了vant里面的collapse折叠面板,官网文档里面介绍的使用方法是这样的 1.在 app.json 或 index.json 中引入组件 "usingComponents": { "van-collapse": "path/to/vant-weapp/dist/collapse/index", "van-collapse-
解决vue项目中type=”file“ change事件只执行一次的问题

问题描述在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件 <template> <div class="hello"> <input type="button" value="上传文件" name="" id="" @click="updata"> <input type=&quo
vue下的@change事件的实现

楼主最近在项目中实践了一下vue,期间遇到了一些坑,现在记录一下先上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script src="vue.js"></script> <body&g
layui 中select下拉change事件失效的解决方法

layui 中select下拉change事件失效的处理方法 1.select中添加 lay-filter="test" <select lay-filter="test"></select> 2.处方方法 form.on('select(test)', function(data){ console.log(data.elem); //得到select原始DOM对象 console.log(data.value); //得到被选中的值 co
对vue下点击事件传参和不传参的区别详解

如下所示: <div id = 'app'> <p><button @click = 'test_click1'>{{btn_text1}}</button></p> <br> <p><button @click = 'test_click2("123")'>{{btn_text2}}</button></p> </div> <script src=
解决vue elementUI 使用el-select 时 change事件的触发问题

如下所示: <el-select v-model="level" size="mini" placeholder="请选择" :change="selectChange()"> <el-option v-for="item in select" :key="item.value" :label="item.label" :value="it
vue select change事件如何传递自定义参数

目录 select change事件传递自定义参数 @change函数传自定义参数实例 select change事件传递自定义参数今天记录一个小问题,最近get到的一个方法,不太常用,记录一下,增强记忆吧. 之前在vue项目中,也经常使用select标签,也经常用change事件,经常用的change事件中,一直有个默认参数,就是选中的选项的信息,最近一个需求除了需了选中项信息外,还需要其他的参数. 今天记录一下这种传参方式,直接上代码. // 普通用法,没有自定义参数 @change="
JQuery触发radio或checkbox的change事件

早上要做一功能,checkbox被选中时,显示隐藏的层,取消选中时,再隐藏选中的层. 初始代码如下: 复制代码代码如下: $(function(){ $("#ischange").change(function() { alert("checked"); }); }); 捣腾了半天,竟然一点反应都没有.百度了下,有高人指出上面几行代码在Firefox等浏览器中可以正常运行,即你选中复选框或取消复选框都会弹出一个对话框,但是在IE中却不会正常执行,即选中或取消复选框
jQuery不兼容input的change事件问题解决过程

最近开发一个项目,需要实现用户在WEB表单里的多个INPUT框中输入数量后,立即自动计算加总各项输入的数量之和,并显示在指定的INPUT框中,这个功能实现的原理是简单的,就是只需要在INPUT的onchange事件中计算加总并将结果赋给指定的INPUT框中即可实现,代码如下: 复制代码代码如下: $("input.syxcost").change(function(){ computeReceivedsyxcost(); } function computeReceivedsy
Vue组件之自定义事件的功能图解

使用v-on绑定自定义事件 (一)基于webpack的项目初始化在使用之前,我们先使用npm构建一个vue应用,使该项目能很好地和webpack模块打包器配合使用,命令如下进入自定义空文件夹vuepro下,myapp项目初始化需利用webpack打包生成一个标准目录的项目文件夹 vue init webpack myapp 安装过程会出现以下几个让我们操作的地方,前几个直接按回车,后面输入n即可,如下图安装完成后,myapp文件夹下会自动生成一些文件和文件夹,表示我们项目初始化完成,而我们
VUE中v-on:click事件中获取当前dom元素的代码

在开发中总是忘记,特意在此记录关键字: $event <div class="bed" v-on:click="updateBed(index,$event)">{{item.BedID}}<br>{{item.CriminalName}}</div> updateBed: function(index, e) { var selectedBedDom = $(e.srcElement)//dom元素 } PS:下面看下v-

vue下的@change事件的实现

相关推荐

随机推荐