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 27 Javascript
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
Jan 22 Javascript
Javascript中将变量转换为字符串的三种方法
Sep 19 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 Javascript
微信小程序实现文件、图片上传功能
Aug 18 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
详解PHP的Yii框架中日志的相关配置及使用
2015/12/08 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
php如何执行非缓冲查询API
2016/07/22 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
JavaScript 全角转半角部分
2009/10/28 Javascript
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
jQuery实现的中英文切换功能示例
2019/01/11 jQuery
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
python 禁止函数修改列表的实现方法
2017/08/03 Python
python实现输入数字的连续加减方法
2018/06/22 Python
Django Docker容器化部署之Django-Docker本地部署
2019/10/09 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
python 截取XML中bndbox的坐标中的图像,另存为jpg的实例
2020/03/10 Python
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
波兰家居和花园家具专家:4Home
2019/05/26 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
劳资人员岗位职责
2013/12/19 职场文书
成品仓管员工作职责
2013/12/29 职场文书
学习十八大精神心得体会
2013/12/31 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
自我检讨书范文
2015/01/28 职场文书
党校毕业个人总结
2015/02/28 职场文书
三八妇女节主持词
2015/07/04 职场文书
Go 语言结构实例分析
2021/07/04 Golang
python读取mnist数据集方法案例详解
2021/09/04 Python
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers