日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

成都創(chuàng)新互聯(lián)專注于尉氏企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),成都商城網(wǎng)站開發(fā)。尉氏網(wǎng)站建設(shè)公司,為尉氏等地區(qū)提供建站服務(wù)。全流程按需規(guī)劃網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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

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

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

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

下面是修改默認(rèn)地址的方法：實(shí)現(xiàn)了點(diǎn)擊選中和取消，并且點(diǎn)擊切換后立即向服務(wù)器提交數(shù)據(jù)實(shí)現(xiàn)實(shí)時的數(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("修改默認(rèn)地址失敗,請刷新后重試");
 }
 })
}

4、使用CSS樣式來實(shí)現(xiàn)radio點(diǎn)擊選中和取消過程中圖片樣式的切換，我整理了另一篇文章，有興趣的可以看一下：點(diǎn)擊radio實(shí)現(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、實(shí)現(xiàn)點(diǎn)擊以后編輯地址：（刪除的話思路一樣）

這個非常簡單，因?yàn)槊恳粋€地址信息我們都是通過v-for循環(huán)得來的，那么我們點(diǎn)擊修改的時候?qū)⑽覀儷@取的數(shù)組中的site傳入到方法中即可，然后訪問頁面的時候?qū)⒃摋l地址信息的id傳過去即可，到編輯地址頁面可以通過id去后臺查到該條地址信息并進(jìn)行地址回填就可以實(shí)現(xiàn)了。

編輯

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

總結(jié)

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