Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)

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("加载失败");
 }
 }
 })
 }
 }
}) 

<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)" />

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("修改默认地址失败,请刷新后重试");
 }
 })
}

.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;
}

<span @click="editAddress(site)">编辑</span>

editAddress:function(site){
 window.location.href="你的跳转路径（编辑地址信息的页面）?addressid=" rel="external nofollow" +site.addressid;
}