Code for full effect:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车</title>
<!-- 引入js -->
<script src="../js/vue.js"></script>
<style>
td {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<div class="addGood">
商品名称：<input type="text" v-model="gname">
商品数量：<input type="number" v-model="gnum">
商品状态：<select v-model="gstatus">
<option value="true">上架</option>
<option value="false">下架</option>
</select>
<button @click="addGood">增加商品</button>
</div>
<table border="=1px" width="800px" rules="all">
<thead>
<th><input type="checkbox" @click="checkAllMethod" v-model="checkAll">全选</th>
<th>编号</th>
<th>名称</th>
<th>状态</th>
<th>数量</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="good in goods">
<td><input type="checkbox" v-model="good.ischecked"></td>
<td>{
{good.id}}</td>
<td>{
{good.name}}</td>
<td>
<span v-if="good.status">上架状态</span>
<span v-else="good.status">下架状态</span>
</td>
<td>
<button @click="addNum(good.id)">+</button>
{
{good.num}}
<button @click="subNum(good.id)">-</button>
</td>
<td>
<button @click="del(good.id)">删除</button>
<button @click="goodDown(good.id)" v-if="good.status">点击下架</button>
<button @click="goodUp(good.id)" v-else="good.status">点击上架</button>
</td>
</tr>
</tbody>
</table>
选中的商品的总数量：{
{total}}
</div>
</body>
<script>
var vue = new Vue({
el: "#app",
data: {
goods: [
{ id: 1, name: "苹果", status: true, num: 5, ischecked: true },
{ id: 2, name: "香蕉", status: true, num: 5, ischecked: false },
{ id: 3, name: "橘子", status: false, num: 5, ischecked: false },
{ id: 4, name: "甘蔗", status: true, num: 5, ischecked: false },
{ id: 5, name: "荔枝", status: true, num: 5, ischecked: false }
]
,
gid: 5,
gname: "",
gstatus: true,
gnum: 5,
gisckecked: false,
checkAll: false
},
methods: {
addGood() {
//添加商品，往goods里面加一条json数据
var myGood = {
id: ++this.gid,
name: this.gname,
num: this.gnum,
status: this.gstatus,
ischecked: this.gisckecked
}
this.goods.push(myGood)
},
//全选，全不选
checkAllMethod() {
this.goods.forEach(element => {
//孩子checkbox的checked属性值跟全选（父checked）的属性保持一致
element.ischecked = !this.checkAll
});
},
//添加数据
addNum(id) {
this.goods.forEach(element => {
if (element.id == id) {
element.num++
}
})
},
//减少数量
subNum(id) {
this.goods.forEach(element => {
if (element.id == id) {
if (element.num > 0) {
element.num--
}
}
})
},
//删除商品
del(id) {
var flag = confirm("你确定要删除吗？");
if (flag) {
this.goods.forEach((element, index) => {
if (element.id == id) {
this.goods.splice(index, 1)
}
})
}
},
//商品下架
goodDown(id) {
this.goods.forEach(element => {
if (element.id == id) {
element.status = !element.status
}
})
},
//商品上架
goodUp(id) {
this.goods.forEach(element => {
if (element.id == id) {
element.status = !element.status
}
})
}
},
computed: {
//计算方法，此处的代码会根据data中的数据自动发生(重新计算)变化
total() {
var sum = 0;
this.goods.forEach(element => {
if (element.ischecked) {
sum += element.num
}
})
return sum
},
}
})
</script>
</html>The final effect
Implementation of the shopping cart function
(1) Select all, select all the content in the shopping cart
(2) Click the increase and decrease buttons, the quantity of each product will change, and the corresponding amount will change
(3) Dynamically calculate the total price and the total number of commodities
(4) Click Delete in the operation, or the Delete selected product button below to delete the product
(5) The status of the product can be changed, put on or off the shelf, more flexible
Code implementation process analysis:
- First of all, let's look at this code, it is not introduced
vue.js, so our first step is of course to introduce it first -
<script src="../js/vue.js"></script>Here I am quoting the local vue.js. The following is the official website and can be used directly. If not, I suggest you go to the vue official website to have a look, https://cdn.staticfile.org/vue/2.2.2/vue .min.js .
-
You can add good-looking styles to the page, you can add them yourself, I directly use the form to implement, there is no style, the code is as follows, this is written in the body, some things are used here
-
Use v-for to call the data in the productList list in data, and loop to create elements. The
looped product data is displayed on the page through the interpolation expression { {}}.
Use v-bind to bind the pro_img (image address) in the product to On the src in img,
use v-model to bind pro_num (the number of items) in product to input in two directions, so as to modify the number of items.
Use v-if, v-else to judge the status -
<div id="app"> <div class="addGood"> 商品名称：<input type="text" v-model="gname"> 商品数量：<input type="number" v-model="gnum"> 商品状态：<select v-model="gstatus"> <option value="true">上架</option> <option value="false">下架</option> </select> <button @click="addGood">增加商品</button> </div> <table border="=1px" width="800px" rules="all"> <thead> <th><input type="checkbox" @click="checkAllMethod" v-model="checkAll">全选</th> <th>编号</th> <th>名称</th> <th>状态</th> <th>数量</th> <th>操作</th> </thead> <tbody> <tr v-for="good in goods"> <td><input type="checkbox" v-model="good.ischecked"></td> <td>{ {good.id}}</td> <td>{ {good.name}}</td> <td> <span v-if="good.status">上架状态</span> <span v-else="good.status">下架状态</span> </td> <td> <button @click="addNum(good.id)">+</button> { {good.num}} <button @click="subNum(good.id)">-</button> </td> <td> <button @click="del(good.id)">删除</button> <button @click="goodDown(good.id)" v-if="good.status">点击下架</button> <button @click="goodUp(good.id)" v-else="good.status">点击上架</button> </td> </tr> </tbody> </table> 选中的商品的总数量：{ {total}} </div>
function realization
(1) Initialize the shopping cart
goods:[
{id:1,name:"苹果",status:true,num:5,ischecked:true},
{id:2,name:"香蕉",status:true,num:5,ischecked:false},
{id:3,name:"橘子",status:false,num:5,ischecked:false},
{id:4,name:"甘蔗",status:true,num:5,ischecked:false},
{id:5,name:"荔枝",status:true,num:5,ischecked:false},
],
gid :5,
gname:"",
gstatus:true,
gischecked:false,
checkAll:false(2) Add function realization
addGood(){
//添加商品，往goods里面加一条json数据
var myGood={
id:++this.gid,
name:this.gname,
num:this.gnum,
status:this.gstatus,
ischecked:this.gischecked
}
this.goods.push(myGood)
},Effect demonstration
(3) Realization of all selection and radio button functions
checkAllMethod(){
this.goods.forEach(element => {
//孩子checkbox的checked属性值跟全选（父checked）的属性保持一致
element.ischecked=this.checkAll
});
},Show results
(4) Add data
addNum(id) {
this.goods.forEach(element => {
if (element.id == id) {
element.num++
}
})
},(5) Reduce the quantity
//减少数量
subNum(id) {
this.goods.forEach(element => {
if (element.id == id) {
if (element.num > 0) {
element.num--
}
}
})
},(6) Delete goods
del(id) {
var flag = confirm("你确定要删除吗？");
if (flag) {
this.goods.forEach((element, index) => {
if (element.id == id) {
this.goods.splice(index, 1)
}
})
}
},(7) Putting goods on and off shelves
//商品下架
goodDown(id) {
this.goods.forEach(element => {
if (element.id == id) {
element.status = !element.status
}
})
},
//商品上架
goodUp(id) {
this.goods.forEach(element => {
if (element.id == id) {
element.status = !element.status
}
})
}
},(8) Quantity calculation
computed: {
//计算方法，此处的代码会根据data中的数据自动发生(重新计算)变化
total() {
var sum = 0;
this.goods.forEach(element => {
if (element.ischecked) {
sum += element.num
}
})
return sum
},
}
}) Final summary:
For programmers who use vue for the first time, this project can increase your proficiency in this language very well, and it will be very helpful for the subsequent learning of vue. I hope this is useful for friends, thank you all.