溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1、前階段做了這個地址管理頁面，實現的過程中遇到了很多的問題，好在最后實現了，在此記錄一下：
首先是加載頁面階段ajax從數據庫中獲取數據，然后動態的顯示在頁面中，隨后可以點擊單個的編輯或刪除進行相關操作，可以單擊默認地址按鈕進行樣式切換，默認地址可以沒有（單擊選中和取消），但是如果設置默認地址則只能設置一個，好，下面我們來一步一步的實現。
2、我這里使用的是Vue.js，頁面加載階段很簡單，直接在mounted聲明一個方法，然后在方法中調用ajax請求訪問數據然后通過v-for循環將數據放入到html元素中即可，這個就不多說了，直接看代碼就行了，這篇文章主要是記錄一下如何實現點擊選中和取消radio，并實現點擊過程中樣式的切換。
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++){
//將獲取到的數據賦值到data中的site[]
vm.sites.push(res.data.addresses[i]);
}
}else{
alert("加載失敗");
}
}
})
}
}
})
3、首先實現radio的點擊選中和取消，可以看下我單獨整理的這篇文章：jQuery實現按鈕的點擊 全選/反選 單選框/復選框 文本框 表單驗證，由于我這里用到的是Vue.js，那么看下我頁面的實現代碼：
<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賦值到每個元素，實現每個元素對應它自己的id，為元素添加data-* 屬性（點擊了解data-*屬性），方便獲取到checked的信息，然后為每個radio添加class方便我們設置點擊以后的圖片切換，根據v-if判斷該條地址信息是否為默認地址，在元素上添加了點擊事件并傳入site（每條地址的相關信息），和該地址信息dom對象。
下面是修改默認地址的方法：實現了點擊選中和取消，并且點擊切換后立即向服務器提交數據實現實時的數據更新。
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樣式來實現radio點擊選中和取消過程中圖片樣式的切換，我整理了另一篇文章，有興趣的可以看一下：點擊radio實現兩個圖片間的樣式切換
我這里直接將我的代碼貼一下供參考：
.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、實現點擊以后編輯地址：（刪除的話思路一樣）
這個非常簡單，因為每一個地址信息我們都是通過v-for循環得來的，那么我們點擊修改的時候將我們獲取的數組中的site傳入到方法中即可，然后訪問頁面的時候將該條地址信息的id傳過去即可，到編輯地址頁面可以通過id去后臺查到該條地址信息并進行地址回填就可以實現了。
<span @click="editAddress(site)">編輯</span>
editAddress:function(site){
window.location.href="你的跳轉路徑（編輯地址信息的頁面）?addressid=" rel="external nofollow" +site.addressid;
}
總結
以上所述是小編給大家介紹的Vue.js 實現地址管理頁面(地址添加、編輯、刪除和設置默認地址)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
