Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
1、前阶段做了这个地址管理页面，实现的过程中遇到了很多的问题，好在最后实现了，在此记录一下：
首先是加载页面阶段ajax从数据库中获取数据，然后动态的显示在页面中，随后可以点击单个的编辑或删除进行相关操作，可以单击默认地址按钮进行样式切换，默认地址可以没有（单击选中和取消），但是如果设置默认地址则只能设置一个，好，下面我们来一步一步的实现。
2、我这里使用的是Vue.js，页面加载阶段很简单，直接在mounted声明一个方法，然后在方法中调用ajax请求访问数据然后通过v-for循环将数据放入到html元素中即可，这个就不多说了，直接看代码就行了，这篇文章主要是记录一下如何实现点击选中和取消radio，并实现点击过程中样式的切换。
varvm=newVue({
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(vari=0;i
3、首先实现radio的点击选中和取消，可以看下我单独整理的这篇文章：jQuery实现按钮的点击全选/反选单选框/复选框文本框表单验证，由于我这里用到的是Vue.js，那么看下我页面的实现代码：
将获取到的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);
}
varisDefault;
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:15px5px00!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去后台查到该条地址信息并进行地址回填就可以实现了。
编辑
editAddress:function(site){
window.location.href="你的跳转路径（编辑地址信息的页面）?addressid="rel="externalnofollow"+site.addressid;
}
总结
以上所述是小编给大家介绍的Vue.js实现地址管理页面(地址添加、编辑、删除和设置默认地址)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。