1、前階段做了這個地址管理頁面，實現(xiàn)的過程中遇到了很多的問題，好在最后實現(xiàn)了，在此記錄一下：
成都創(chuàng)新互聯(lián)專注于尉氏企業(yè)網(wǎng)站建設,響應式網(wǎng)站建設,成都商城網(wǎng)站開發(fā)。尉氏網(wǎng)站建設公司,為尉氏等地區(qū)提供建站服務。全流程按需規(guī)劃網(wǎng)站，專業(yè)設計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務
首先是加載頁面階段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;i3、首先實現(xiàn)radio的點擊選中和取消，可以看下我單獨整理的這篇文章：jQuery實現(xiàn)按鈕的點擊 全選/反選 單選框/復選框 文本框 表單驗證，由于我這里用到的是Vue.js，那么看下我頁面的實現(xiàn)代碼：
將獲取到的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)了。
編輯
editAddress:function(site){
window.location.href="你的跳轉路徑（編輯地址信息的頁面）?addressid=" rel="external nofollow" +site.addressid;
}總結
以上所述是小編給大家介紹的Vue.js 實現(xiàn)地址管理頁面(地址添加、編輯、刪除和設置默認地址)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
