怎么在vue中實現一個@change事件?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。
專注于為中小企業(yè)提供網站制作、成都網站制作服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)巴彥免費做網站提供優(yōu)質的服務。我們立足成都,凝聚了一批互聯網行業(yè)人才,有力地推動了近千家企業(yè)的穩(wěn)健成長,幫助中小企業(yè)通過網站建設實現規(guī)模擴充和轉變。
<!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>
如果按照平常的使用習慣,看起來好像沒多大問題,切換父元素的時候監(jiān)聽change事件聯動子元素值的變化,很符合常年使用jQuery開發(fā)的習慣,效果如圖:
那如果頁面上有多個使用到相同的聯動效果的地方呢?我們看下效果會是怎樣,如圖
<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; }
看完上述內容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注創(chuàng)新互聯行業(yè)資訊頻道,感謝您對創(chuàng)新互聯的支持。
本文名稱:怎么在vue中實現一個@change事件
URL網址:http://redsoil1982.com.cn/article48/ijhoep.html
成都網站建設公司_創(chuàng)新互聯,為您提供App設計、網站策劃、企業(yè)網站制作、、動態(tài)網站、靜態(tài)網站
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯