The code is put on the code cloud, you can pull it yourself: https://gitee.com/cxy-xupeng/vue-test.git
As a back-end programmer, how do you carefully read the contents of the first two chapters, then let’s take a look at the small exercises here.
One, small exercise 1
For an array list, whoever we click will be red.
Analysis: First, you need to traverse the list. Secondly, if you want to make someone red, you must be able to get each list data, that is, you need the serial number of the list. Third, it must also require a click event. Fourth, you need a style
Two, small exercise two
1. For a book shopping cart, you click "+", the quantity of the book +1, the total price plus the amount of the book. "-" is the same.
2. Click Remove to remove the book.
3. If there are no books in the entire shopping cart, display a line of text
Let's build a shelf first:
Let's start to deal with some details:
(1) The price has to keep two decimal places, and there is a ¥ in front of it. '￥'+price.toFixed(2)
There are also two ways to set the price here
1) The method we learned before
js
html village:
2) Filter
In js:
html village:
(2) "+" and "-" in the price
1) Click the corresponding number to follow the change
2) It should not be reduced after it becomes 1
(3) Click Remove to delete the row of data. And display a line of text
(4) Display the final price
At this point, our code is complete:
Complete code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入style.css -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app">
<div v-if="books.length">
<table>
<thead>
<tr>
<th></th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(book,index) in books">
<td>{
{book.id}}</td>
<td>{
{book.name}}</td>
<td>{
{book.date}}</td>
<td>
<button @click="decrement(index)" :disabled="book.count<=1">-</button>
{
{book.price | showPrice}}
<button @click="increment(index)">+</button>
</td>
<td>{
{book.count}}</td>
<td>
<button @click="removeHandle(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<h2>总价格：{
{totalPrice | showPrice}}</h2>
</div>
<div v-else>购物车为空</div>
</div>
<!-- 引入js -->
<script src="../js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>
main.js
const app = new Vue({
el:"#app",
data:{
books:[
{
id:1,
name:'java',
date:'2020-11',
price:85.00,
count:1
},
{
id:2,
name:'linux',
date:'2020-11',
price:59.00,
count:1
},
{
id:3,
name:'python',
date:'2020-11',
price:39.00,
count:1
},
{
id:4,
name:'java',
date:'2020-11',
price:128.00,
count:1
}
]
},
methods:{
/* getFinalPrice(price){
return '￥'+price.toFixed(2)
} */
decrement(index){
this.books[index].count--
},
increment(index){
this.books[index].count++
},
removeHandle(index){
this.books.splice(index,1)
}
},
filters:{
showPrice(price){
return '￥'+price.toFixed(2)
}
},
computed:{
totalPrice(){
let totalPrice =0
for(let i = 0;i<this.books.length;i++){
totalPrice += this.books[i].count * this.books[i].price
}
return totalPrice
}
}
})style.css
table{
border:1px solid #e9e9e9;
/* border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。 */
border-collapse: collapse;
/* border-spacing 属性设置相邻单元格的边框间的距离 */
border-spacing: 0;
}
th,td{
padding: 8px 16px;
border: 1px solid #e9e9e9;
text-align: left;
}
th{
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}