Vue.js实现地址管理页⾯思路详解（地址添加、编辑、删除和设置默认地址）
1、前阶段做了这个地址管理页⾯，实现的过程中遇到了很多的问题，好在最后实现了，在此记录⼀下：
⾸先是加载页⾯阶段ajax从数据库中获取数据，然后动态的显⽰在页⾯中，随后可以点击单个的编辑或删除进⾏相关操作，可以单击默认地址按钮进⾏样式切换，默认地址可以没
有（单击选中和取消），但是如果设置默认地址则只能设置⼀个，好，下⾯我们来⼀步⼀步的实现。
2、我这⾥使⽤的是Vue.js，页⾯加载阶段很简单，直接在mounted声明⼀个⽅法，然后在⽅法中调⽤ajax请求访问数据然后通过v-for循环将数据放⼊到html元素中即可，这个就不
多说了，直接看代码就⾏了，这篇⽂章主要是记录⼀下如何实现点击选中和取消radio，并实现点击过程中样式的切换。
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){
de==0){
for(var i=0;i<res.data.addresses.length;i++){
//将获取到的数据赋值到data中的site[]
vm.sites.push(res.data.addresses[i]);
}
}else{
alert("加载失败");
}
}
})
}
}
})
3、⾸先实现radio的点击选中和取消，可以看下我单独整理的这篇⽂章：，由于我这⾥⽤到的是Vue.js，那么看下我页⾯的实现代码：
<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)" />
将获取到的addressid通过：id赋值到每个元素，实现每个元素对应它⾃⼰的id，为元素添加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);
}
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){
de=="0"){
}
},
error:function(){
alert("修改默认地址失败，请刷新后重试");
}
})
}
htmlradio添加切换事件4、使⽤CSS样式来实现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 实现地址管理页⾯(地址添加、编辑、删除和设置默认地址)，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。