小编给大家分享一下vue怎么实现的仿淘宝购物车功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
具体如下:
下面是一张众所周知的淘宝购物车页面,今天要讲解的案例就是用vue.js做一个类似的页面
首先简单介绍一下可能会用到的一些vue.js的用法:
v-bind,绑定属性;例如v-bind:class="{'class1':flag}",这是常用的绑定样式的方法,如果flag为true则class=class1;v-bind:src="image",image就是图像的路径;
v-if="flag"与v-show="flag",如果flag为true,则绑定的为“可见”,不同的是v-show是一开始就渲染在DOM中的,改变的则是它的display而已,而v-if为false则是从HTML代码中移除;
v-on:或@,样式绑定v-on:click="dosomething()"或者@click="dosomething()",点击触发dosomething函数;
v-for循环,v-for="item in items",items为数组,item为items数组的值而不是索引;
要注意的是当this作用域的改变:当this作用域改变是我们设置var self = this,在之后的使用中用self代替;
下面是HTML代码:
购物车 商品单价数量总价