VUE2.0实现购物车和地址选配功能学习第七节

第七节 卡片选中,设置默认

1.卡片选中html:<li v-for="(item,index) in filterAddress" v-bind:class="{‘check‘:index==currentIndex}" @click="currentIndex=index">            <!--循环判断currenIndex,控制当前选中卡片的样式-->js:
data:{    currentIndex:0,},2.设置默认html:
<div class="addr-opration addr-set-default" v-if="!item.isDefault">    <a href="javascript:;" class="addr-set-default-btn" @click="setDefault(item.addressId)"><i>设为默认</i></a></div><div class="addr-opration addr-default" v-if="item.isDefault">默认地址</div>js:
setDefault: function (addressId) {    this.addressList.forEach(function (address,index) {        if(address.addressId==addressId){            address.isDefault=true;        }else{            address.isDefault=false;        }    })}
效果:
 
时间: 2024-12-26 09:43:22

VUE2.0实现购物车和地址选配功能学习第七节的相关文章

VUE2.0实现购物车和地址选配功能学习第四节

第四节 v-on实现金额动态计算 用¥金额 进行格式处理,可以使用原生js进行转换,但是在vuei,使用filter过滤器更加方便 注: 1.es6语法=>和import等 好处在于res参数后的function函数内的this作用域,不弄在外部声明变量了. methods:{ cartView:function(){ let _this=this; this.$http.get("data/cartData.json",{"id":123}).then( r

VUE2.0实现购物车和地址选配功能学习第三节

第三节 使用v-for渲染商品列表 1.使用vue-resource插件引入json数据 (注:在谷歌中调试打断点-- ,console还可以输出vm,res等属性列表,或者productList等一些值.如打出vm可以查看vue实例包含的属性和方法等) html:<ul class="cart-item-list"> <li v-for="(item,index) in productList"> <!--v-for="it

VUE2.0实现购物车和地址选配功能学习第一节(来源--慕课网河畔一角)

第一节  vue知识 vue-resource:和后台交互的一个插件,实现get.post和jsonp等功能.(替代jQuery) vue特点: 1.易用:通过创建vue实例,{{}}绑定数据十分方便,如果是jQuery还要获取值,设定十分繁琐 2.灵活-渐进式 ①渲染字段:②公共头部和公共尾部做成组件:③单页面会用到:④管理组件状态,vuex⑤使用构建工具完结项目 3.高效 ①16kb min+gzip的运行大小:②超快虚拟DOM:③最省心的优化 vue基础指令介绍: 1.指令的使用: v-m

vue购物车和地址选配(三)

参考资料:vue.js官网 项目演示: 项目源代码: 核心代码及踩坑 删除: new Vue({ el:'#app', data:{ productlist:[], totalMoney:0, checkAllFrag:false,//默认没有全选 deFlag:false, //当前的存起来 curProduct:'' }, //必须加mounted函数,这是页面初加载,如果不写这个函数,network中将请求不到数据 mounted:function(){ this.cartView();

完善慕课网Vue2.0购物车功能

使用vue2.0实现购物车和地址选配功能这门课程,早之前就在慕课网上看了,个人感觉很不错很适合刚入门vue的新手,最近做的项目都没用vue怕自己生疏了所以就再做一下练练手顺便完善一下老师没有做的小功能. 课程中实现的功能:商品列表的渲染.使用过滤器格式化商品金额.实现单件商品的计算单选全选.实现商品总金额计算和删除商品 完善的功能: 单选按钮选中后再计算总金额: 单选按钮如果全部选中则全选按钮为选中状态,如果没有全部选中则为默认状态 先上图看一下: 先创建一个vue的实例,以下列出的是本项目使用

Vue2.0+Node.js+MongoDB 全栈打造商城系统

第1章 课程介绍简单回顾前端近几年的框架模式,了解不同时期下的框架特点.其次介绍Vue框架的背景和核心思想,以及同其它MV*框架的对比.1-1 课程-导学1-2 前端框架回顾1-3 vue概况以及核心思想1-4 vue框架优缺点对比 第2章 Vue基础从0到1,如何搭建一个简单的Vue项目:本章节主要讲解Node和Npm环境的搭建,其次介绍vue-cli脚手架的使用,以及通过详细拆解介绍脚手架生成的配置文件信息,最后给大家介绍了Vue涵盖的基础语法.2-1 nodejs和npm的安装和环境搭建2

使用vue2.0 vue-router vuex 模拟ios7操作

其实你也可以,甚至做得更好... 首先看一下效果:用vue2.0实现SPA:模拟ios7操作 与 通讯录实现 github地址是:https://github.com/QRL909109/ios7 如果您觉得可以,麻烦给一个star,支持我一下. 之前接触过Angular1.0,React,都只是学点入门,但对于Vue却觉得很容易上手,不止入门简单,插件也是很丰富的,脚手架也是便利的很... 项目分析: 1.首屏滑动解锁,并能移动小圆点 2.主屏幕  长按图标抖动,删除图标,点击小圆点的主屏幕

vue2.0实践 —— Node + vue 实现移动官网

简介 使用 Node + vue 对公司的官网进行了一个简单的移动端的实现. 源码 https://github.com/wx1993/node-vue-fabaocn 效果 组件 轮播图(使用 vue-awesome-swiper 插件) 新闻列表 新闻详情 职位列表 联系我们页面(使用百度地图api) 技术 Express.Vue.Vue-Router.Vue-Resource.Webpack Vue vue 的组件化思想和 React 很像,一个 vue 组件将 html.css 和 js

vue2.0学习(二)-全局API

vue2.0学习(二)-全局API GitHub源码 https://github.com/sunnyguyan/VueDemo 1.Vue.directive自定义指令 一.什么是全局API? 全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,比如我们今天要学习的指令Vue.directive.说的简单些就是,在构造器外部用Vue提供给我们的API函数来定义新的功能 二.Vue.directive自定义指令 我们在第一季就学习了内部指令,