快捷導(dǎo)航

vue下的@change事件的實(shí)現(xiàn)

更新時(shí)間：2019年10月25日 14:16:53 作者：RobertCrazying

這篇文章主要介紹了vue下的@change事件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

樓主最近在項(xiàng)目中實(shí)踐了一下vue，期間遇到了一些坑，現(xiàn)在記錄一下

先上代碼

<!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="">請(qǐng)選擇</option>
      <option v-for="province in provinces" :value="province.id">{{province.text}}</option>
    </select>
    <select name="" id="">
      <option value="">請(qǐng)選擇</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>

如果按照平常的使用習(xí)慣，看起來好像沒多大問題，切換父元素的時(shí)候監(jiān)聽change事件聯(lián)動(dòng)子元素值的變化，很符合常年使用jQuery開發(fā)的習(xí)慣，效果如圖：

那如果頁面上有多個(gè)使用到相同的聯(lián)動(dòng)效果的地方呢？我們看下效果會(huì)是怎樣，如圖

    <select name="" id="" @change="getCity(provinceId)" v-model="provinceId">
      <option value="">請(qǐng)選擇</option>
      <option v-for="province in provinces" :value="province.id">{{province.text}}</option>
    </select>
    <select name="" id="">
      <option value="">請(qǐng)選擇</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="">請(qǐng)選擇</option>
      <option v-for="province in provinces" :value="province.id">{{province.text}}</option>
    </select>
    <select name="" id="">
      <option value="">請(qǐng)選擇</option>
      <option :value="city.id" v-for="city in citys">{{city.text}}</option>
    </select>

結(jié)果是互相受到影響,這并不是我們想看到的。

我的解決辦法是，citys改為一個(gè)實(shí)時(shí)計(jì)算得到的數(shù)組而不是綁定現(xiàn)有僅有的同一個(gè)數(shù)組，代碼改寫如下：

    <select name="" id="">
      <option value="">請(qǐng)選擇</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;
      }

效果如下：

可以看到，現(xiàn)在已經(jīng)不會(huì)互相影響了。

總結(jié)：類似vue的mvvm框架都是數(shù)據(jù)與視圖雙向綁定的，而change事件往往用于視圖改變的時(shí)候去操作數(shù)據(jù)，這在mvvm框架里面顯得多此一舉，框架本身已映射視圖的變化到數(shù)據(jù)上，所以絕大部分的change事件監(jiān)聽都是不必要的，對(duì)應(yīng)vue，可改寫為methods方法或者computed計(jì)算屬性。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: