使用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 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
Nov 17 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
JS删除数组里的某个元素方法
Feb 03 Javascript
jQuery实现获取多选框的值示例
Feb 07 jQuery
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 Javascript
js实现验证码干扰(动态)
Feb 23 Javascript
JS中如何优雅的使用async await详解
Oct 05 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
js读写(删除)Cookie实例详解
2013/04/17 Javascript
jQuery写的日历(包括日历的样式及功能)
2013/04/23 Javascript
自己封装的常用javascript函数分享
2015/01/07 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
jQuery 防止相同的事件快速重复触发方法
2018/02/08 jQuery
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
vue style width a href动态拼接问题的解决
2020/08/07 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
Python编程快速上手——正则表达式查找功能案例分析
2020/02/28 Python
Python bisect模块原理及常见实例
2020/06/17 Python
俄罗斯马克西多姆家居用品网上商店:Максидом
2020/02/06 全球购物
自考毕业自我鉴定
2014/03/18 职场文书
运动会搞笑广播稿
2014/10/14 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书