使用vue2实现购物车和地址选配功能


Posted in Javascript onMarch 29, 2018

首先,vue基础js写法

new Vue({
  el:"#app",
  //模型
  data:{
  },
  filters:{
  },
  mounted:function(){
    this.$nextTick(function(){
    //初始化调用
    });
  },
  computed:{
    //实时计算
  },
  methods:{
  }
});

v-for

<li v-for="(item,index) in productList">
  <div class="item-name">{{item.productName}}</div>
</li>

v-model

(实时更新)

<input type="text" value="0" disabled v-model="item.productQuantity">
<div class="item-price-total">{{item.productQuantity}}</div>

v-bind

<a href="javascript:;" class="item-check-btn" v-bind:class="{'check':item.checked}">
<!--可通过更改item.checked的值设置是否选中-->
<!--必须用v-bind 不可直接在class里面直接使用{{}}-->
<!--v-bind:class= 可简写为 :class= -->

filters过滤器的使用

1.html引用方式

<div class="item-price">{{item.productPrice | money('元')}}</div>

2.过滤器

filters:{
  formatMoney:function(value,type){
    return "¥"+value.toFixed(2)+ type;
  }
},

3.全局过滤器(写在new Vue的外面)

Vue.filter("money",function(value,type){
  return "¥"+value.toFixed(2) + type; //保留两位小数 结果eg:¥19.00元
});

调用methods中的方法:

@click="method(param)"
//或者
@click="delFlag=false"
@click="limitNum=addressList.length"

computed 实时计算

如下:默认显示三条数据,点击more 显示所有

<li v-for="(item,index) in filterAddress">
<div class="shipping-addr-more">
<a class="addr-more-btn up-down-btn" href="javascript:" @click="limitNum=addressList.length">
  more
  <i class="i-up-down">
   <i class="i-up-down-l"></i>
   <i class="i-up-down-r"></i>
  </i>
 </a>
</div>

data:{
    limitNum:3
  },
computed:{
  filterAddress:function(){
    return this.addressList.slice(0,this.limitNum);
  }
},

先提出一两个经典的实例

1.以下实现了对循环卡片的点击 选中

<li v-for="(item,index) in filterAddress" v-bind:class="{'check':index==currentIndex}" 
@click="currentIndex=index">
<!--其中currentIndex在js里需要定义-->

2.以下实现了对固定卡片的点击 选中

<ul>
  <li v-bind:class="{'check':shippingMethod==1}" @click="shippingMethod=1">
   <div class="name">标准配送</div>
   <div class="price">Free</div>
  </li >
  <li v-bind:class="{'check':shippingMethod==2}" @click="shippingMethod=2">
   <div class="name">高级配送</div>
   <div class="price">180</div>
  </li>
 </ul>
 <!--其中shippingMethod在js里需要定义-->

题外话:由于本人小白,学一点是一点,额外记录一下辅助弹出框 遮罩层的写法

<div class="md-overlay" v-if="delFlag"></div>

vue2的js语法 贴几个 方便查用

1.调用后端方法

var _this = this;
this.$http.get("data/address.json").then(function(response){
    _this.addressList = response; //这里不能直接用this 此this非彼this 所以只能声明_this
}); 
//以下为ES6写法,就可以直接用this了
let _this = this;  //没用,就放这看看~
this.$http.get("data/cartData.json",{"id":123}).then(res=>{
  this.productList = res.data.result.list;
});

2.forEach循环

this.productList.forEach(function(item,index){
  if(typeof item.checked == 'undefined'){ 
  //如果item中没有checked属性 在item对象中添加checked属性,值为true
    _this.$set(item,"checked",true);//局部注册
    Vue.set(item,"checked",true);//全局注册
  }
});

附上链接:码云地址vue2_study

总结

以上所述是小编给大家介绍的使用vue2实现购物车和地址选配功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
ppk谈JavaScript style属性
Oct 10 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
js常用代码段整理
Nov 30 Javascript
JavaScript中使用concat()方法拼接字符串的教程
Jun 06 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
Dec 11 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
ant design 日期格式化的实现
Oct 27 Javascript
vue axios请求拦截实例代码
Mar 29 #Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 #Javascript
jQuery实现的上传图片本地预览效果简单示例
Mar 29 #jQuery
详解Javascript中new()到底做了些什么?
Mar 29 #Javascript
Koa2 之文件上传下载的示例代码
Mar 29 #Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 #Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 #Javascript
You might like
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
php如何获取Http请求
2020/04/30 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
jQuery使用cookie与json简单实现购物车功能
2016/04/15 Javascript
react 父子组件之间通讯props
2018/09/08 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
Python的Django框架中的数据库配置指南
2015/07/17 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
在Python中增加和插入元素的示例
2018/11/01 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
使用python-opencv读取视频,计算视频总帧数及FPS的实现
2019/12/10 Python
pandas读取csv文件提示不存在的解决方法及原因分析
2020/04/21 Python
python实点云分割k-means(sklearn)详解
2020/05/28 Python
PyTorch的torch.cat用法
2020/06/28 Python
海蓝之谜(LA MER)澳大利亚官方商城:全球高端奢华护肤品牌
2017/10/27 全球购物
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
国际贸易毕业生求职信范文
2014/02/21 职场文书
员工安全生产承诺书
2014/05/22 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
2015初中政治教学工作总结
2015/07/21 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP