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


Posted in Javascript onDecember 11, 2019

1、前阶段做了这个地址管理页面,实现的过程中遇到了很多的问题,好在最后实现了,在此记录一下:

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

首先是加载页面阶段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){
 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("加载失败");
 }
 }
 })
 }
 }
})

3、首先实现radio的点击选中和取消,可以看下我单独整理的这篇文章:jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证,由于我这里用到的是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-* 属性(点击了解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){
 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 实现地址管理页面(地址添加、编辑、删除和设置默认地址),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
浅谈javascript中的闭包
May 13 Javascript
在jQuery中使用$而避免跟其它库产生冲突的方法
Aug 13 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
详解Vue整合axios的实例代码
Jun 21 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
vue双向绑定数据限制长度的方法
Nov 04 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
vuex分模块后,实现获取state的值
Jul 26 Javascript
浅谈JavaScript浅拷贝和深拷贝
Nov 07 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 #Javascript
js消除图片小游戏代码
Dec 11 #Javascript
详解vue中$nextTick和$forceUpdate的用法
Dec 11 #Javascript
基于jQuery实现可编辑的表格
Dec 11 #jQuery
jQuery实现可编辑的表格
Dec 11 #jQuery
vue element自定义表单验证请求后端接口验证
Dec 11 #Javascript
详解如何在JS代码中消灭for循环
Dec 11 #Javascript
You might like
自己动手做一个SQL解释器
2006/10/09 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
JS网络游戏-(模拟城市webgame)提供的一些例子下载
2007/10/14 Javascript
JavaScript 监听textarea中按键事件
2009/10/08 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
2017/05/17 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
python解析文件示例
2014/01/23 Python
Python中使用不同编码读写txt文件详解
2015/05/28 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
Python爬虫实战之12306抢票开源
2019/01/24 Python
ERLANG和PYTHON互通实现过程详解
2019/07/05 Python
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
数据库笔试题
2013/05/09 面试题
什么是事务?事务有哪些性质?
2012/03/11 面试题
干部现实表现材料
2014/02/13 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
表彰会主持词
2014/03/26 职场文书
亚运会口号
2014/06/20 职场文书
2015初中政教处工作总结
2015/07/21 职场文书
求职自我评价参考范文
2019/05/16 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
sql中mod()函数取余数的用法
2021/05/29 SQL Server