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

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 实现地址管理页面(地址添加、编辑、删除和设置默认地址)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！