如果看完了Vue.js入门1-5,就可以很容易的理解这个小Demo,这个Demo我们来模拟一个购物车。
1.首先,我们写一个Demo需要把准备工作做好
1.1创建三个文件
index.html(引入资源以及模板)
index.js(Vue实例以及业务代码)
style.css(css样式)
如下图:
1.2在index.html中引入vue.js的相关资源和js,这里我就不上图片了,直接把代码粘过来
<html>
<head>
<title>购物车小Demo</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app" v-cloak>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--引入JS-->
<script src="index.js"></script>
</body>
</html>这里需要注意的是要将引入的js和vue写在<body>的最底部,如果写在<head>里面,vue的实例就无法创建了!!!
这样准备工作就做好了,接下来就该实例化vue了。2.初始化Vue实例
2.1在index.js中编写代码:
var app = new Vue({
el:'#app',
data:{
},
computed:{
},
methods:{
}
})3.添加商品
3.1在index.js中的data方法中添加商品
list:[
{
id:1,
name:'iPhone10',
price:'6666',
count:1
},
{
id:2,
name:'oppo',
price:'4444',
count:1
},
{
id:3,
name:'笔记本',
price:'88888',
count:1
},
{
id:4,
name:'充电器',
price:'88',
count:1
},
{
id:5,
name:'手机壳',
price:'18',
count:1
},
]4.在index.html中完成表格的大体框架
<div id="app" v-cloak>
<template v-if="list.length">
<table>
<thead>
<tr>
<th></th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div>总价: ¥ {{totalPrice}} 元</div>
</template>
<div v-else>购物车为空</div>
</div>5.因为价钱在千分位都需要”,”隔开,所以我们在index.js的computed选项内写入;
computed:{
totalPrice:function(){
var total = 0;
for (var i = 0; i < this.list.length; i++) {
var item = this.list[i];
total += item.price * item.count;
}
return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
}
},6.在index.html的中展示数据
<tbody>
<tr v-for="(item,index) in list">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="handleReduce(index)":disabled="item.count===1">-</button>
{{item.count}}
<button @click="handleAdd(index)">+</button>
</td>
<td>
<button @click="handleRemove(index)">移除</button>
</td>
</tr>
</tbody>
/*
其中handleReduce是减少的方法,handleAdd是增加的方法,handleRemove是移除的方法
*/7.在index.js中完成这三个方法
methods:{
handleReduce:function(index){
if (this.list[index].count === 1) {
return;
}
this.list[index].count--;
},
handleAdd:function(index){
this.list[index].count++;
},
handleRemove:function(index){
this.list.splice(index,1);
}
}8.这样就完成了这个demo,是不是很简单,对了还有css没给大家.
index.hteml完整代码:
<html>
<head>
<title>购物车小Demo</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app" v-cloak>
<template v-if="list.length">
<table>
<thead>
<tr>
<th></th>
<th>商品名称</th>
<th>商品单价</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in list">
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="handleReduce(index)":disabled="item.count===1">-</button>
{{item.count}}
<button @click="handleAdd(index)">+</button>
</td>
<td>
<button @click="handleRemove(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<div>总价: ¥ {{totalPrice}} 元</div>
</template>
<div v-else>购物车为空</div>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--引入JS-->
<script src="index.js"></script>
</body>
</html>
index.js完整代码:
//初始化实例
var app = new Vue({
el:'#app',
data:{
list:[
{
id:1,
name:'iPhone10',
price:'6666',
count:1
},
{
id:2,
name:'oppo',
price:'4444',
count:1
},
{
id:3,
name:'笔记本',
price:'88888',
count:1
},
{
id:4,
name:'充电器',
price:'88',
count:1
},
{
id:5,
name:'手机壳',
price:'18',
count:1
}
]
},
computed:{
totalPrice:function(){
var total = 0;
for (var i = 0; i < this.list.length; i++) {
var item = this.list[i];
total += item.price * item.count;
}
return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
}
},
methods:{
handleReduce:function(index){
if (this.list[index].count === 1) {
return;
}
this.list[index].count--;
},
handleAdd:function(index){
this.list[index].count++;
},
handleRemove:function(index){
this.list.splice(index,1);
}
}
})
style.css完整代码:
[v-cloak]{
display:none;
}
table{
border:1px solid #e9e9e9;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
}
th,td{
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th{
background: #f7f7f7;
color: #5c6b77;
font-weight: 600;
white-space: nowrap;
}
最终的效果图:
可以加可以减可以移除,总价会随着商品的变化而变化!