Vue.js 實現(xiàn)地址管理頁面思路詳解(地址添加、編輯、刪除和設置默認地址)

更新時間：2019年12月11日 14:00:51 作者：你好像很好吃a

這篇文章主要介紹了Vue.js 實現(xiàn)地址管理頁面的思路(地址添加、編輯、刪除和設置默認地址),本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

1、前階段做了這個地址管理頁面，實現(xiàn)的過程中遇到了很多的問題，好在最后實現(xiàn)了，在此記錄一下：

首先是加載頁面階段ajax從數(shù)據(jù)庫中獲取數(shù)據(jù)，然后動態(tài)的顯示在頁面中，隨后可以點擊單個的編輯或刪除進行相關操作，可以單擊默認地址按鈕進行樣式切換，默認地址可以沒有（單擊選中和取消），但是如果設置默認地址則只能設置一個，好，下面我們來一步一步的實現(xiàn)。

2、我這里使用的是Vue.js，頁面加載階段很簡單，直接在mounted聲明一個方法，然后在方法中調用ajax請求訪問數(shù)據(jù)然后通過v-for循環(huán)將數(shù)據(jù)放入到html元素中即可，這個就不多說了，直接看代碼就行了，這篇文章主要是記錄一下如何實現(xiàn)點擊選中和取消radio，并實現(xiàn)點擊過程中樣式的切換。

var vm = new Vue({
 el:"#",
 data:{
 sites:[]
 },
 mounted:function() {
 this.showData();
 },
 methods:{
 showData:function(){
 jQuery.ajax({
 url:"這里寫你的訪問路徑",
 data:"",
 type:"GET",
 dataType:"json",
 success:function(res){
 if(res.code==0){
 for(var i=0;i<res.data.addresses.length;i++){
 //將獲取到的數(shù)據(jù)賦值到data中的site[]
 vm.sites.push(res.data.addresses[i]);
 }
 }else{
 alert("加載失敗");
 }
 }
 })
 }
 }
})

3、首先實現(xiàn)radio的點擊選中和取消，可以看下我單獨整理的這篇文章：jQuery實現(xiàn)按鈕的點擊全選/反選單選框/復選框文本框表單驗證，由于我這里用到的是Vue.js，那么看下我頁面的實現(xiàn)代碼：

<input type="radio" :id="site.addressid" name="defaultAddress" class="address_manager_content-d3-left-img" data-waschecked="true" v-if="site.isdefault=='1'" checked="checked" @click="editIsDefault(site, $event)"/>
<input type="radio" :id="site.addressid" name="defaultAddress" class="address_manager_content-d3-left-img" data-waschecked="false" v-else @click="editIsDefault(site, $event)" />

將獲取到的addressid通過：id賦值到每個元素，實現(xiàn)每個元素對應它自己的id，為元素添加data-* 屬性（點擊了解data-*屬性），方便獲取到checked的信息，然后為每個radio添加class方便我們設置點擊以后的圖片切換，根據(jù)v-if判斷該條地址信息是否為默認地址，在元素上添加了點擊事件并傳入site（每條地址的相關信息），和該地址信息dom對象。

下面是修改默認地址的方法：實現(xiàn)了點擊選中和取消，并且點擊切換后立即向服務器提交數(shù)據(jù)實現(xiàn)實時的數(shù)據(jù)更新。

editIsDefault:function(site,event){
 if($(event.currentTarget).data("waschecked")==true){
 $(event.currentTarget).prop("checked",false);
 $("input:radio[name='defaultAddress']").data('waschecked',false);
 $(event.currentTarget).data("waschecked",false);
 }else{
 $(event.currentTarget).prop("checked",true);
 $("input:radio[name='defaultAddress']").data('waschecked',false);
 $(event.currentTarget).data("waschecked",true);
 }
 var isDefault;
 if($(event.currentTarget).prop("checked")){
 isDefault = "1";
 }else{
 isDefault = "0";
 }
 jQuery.ajax({
 url:"這里寫你自己的url",
 data:{
 addressid: site.addressid,
 name: site.name,
 phone: site.phone,
 area: site.area,
 address: site.address,
 isdefault: isDefault 
 },
 type:"GET",
 dataType:"json",
 success:function(res){
 if(res.code=="0"){
 }
 },
 error:function(){
 alert("修改默認地址失敗,請刷新后重試");
 }
 })
}

4、使用CSS樣式來實現(xiàn)radio點擊選中和取消過程中圖片樣式的切換，我整理了另一篇文章，有興趣的可以看一下：點擊radio實現(xiàn)兩個圖片間的樣式切換

我這里直接將我的代碼貼一下供參考：

.address_manager_content-d3-left-img{
 /* 隱藏原有樣式 */
 appearance: none;
 -webkit-appearance: none;
 outline: none;
 /* 增加新樣式:未選中時 */
 display: inline-block;
 width: 20px;
 height: 20px;
 position: static;
 margin : 15px 5px 0 0!important;
 background: url(未選中時圖片的url) no-repeat;
 background-size: cover;
}
.address_manager_content-d3-left-img:checked{/* 選中時 */
 background: url(選中時的圖片url) no-repeat;
 background-size: cover;
}

5、實現(xiàn)點擊以后編輯地址：（刪除的話思路一樣）

這個非常簡單，因為每一個地址信息我們都是通過v-for循環(huán)得來的，那么我們點擊修改的時候將我們獲取的數(shù)組中的site傳入到方法中即可，然后訪問頁面的時候將該條地址信息的id傳過去即可，到編輯地址頁面可以通過id去后臺查到該條地址信息并進行地址回填就可以實現(xiàn)了。

<span @click="editAddress(site)">編輯</span>

editAddress:function(site){
 window.location.href="你的跳轉路徑（編輯地址信息的頁面）?addressid=" rel="external nofollow" +site.addressid;
}

總結

以上所述是小編給大家介紹的Vue.js 實現(xiàn)地址管理頁面(地址添加、編輯、刪除和設置默認地址)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

您可能感興趣的文章: