Vue笔记：图书购物车案例
BookShop案例：
一、搭建
使用了semantic-ui框架，搭建整个页面
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<link rel="stylesheet" type="text/css" href="bookShop.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
head>
<body>
<div id="app" v-cloak>
<div class="ui container">
<table class="ui table">
<thead>
<tr>
<th>th>
<th>书籍名称th>
<th>出版日期th>
<th>价格th>
<th>购买数量th>
<th>操作th>
tr>
thead>
<tbody>
<tr v-for="item in books">
<th >{{item.id}}th>
<th >{{item.name}}th>
<th >{{item.date}}th>
<th >￥{{item.price}}th>
<th >
<button type="button">-button>
{{item.num}}
<button type="button">+button>
th>
<th><button type="button">移除button>th>
tr>
tbody>
table>
div>
div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js">script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="bookShop.js">script>
body>
html>
效果：
过滤器实现显示两位小数
然后简单修饰了一下，在价格一栏中可以将Mastach写成：
<th >￥{{item.price.toFixed(2)}}th>
tofixed(x)可以使数字保留x位小数
也可以使用过滤器：filters回调函数
filters:{//过滤器
getFinalPrice:function(price){
return '￥'+price.toFixed(2);
}
}
调用方法：
<th >{{item.price | getFinalPrice}}th>
过滤器入门：
from：https://cn.vuejs.org/v2/guide/filters.html
filters：用于一些常见的文本格式化
定义方式：
你可以在一个组件的选项中定义本地的过滤器：
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
在创建Vue对象前定义：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
使用：
在花括号中和v-bind中，用“|”符号指示：
{{ message | capitalize }}
<div v-bind:id="rawId | formatId">div>
过滤器可以串联使用，第一个过滤器会把管道指示前的值作为参数传入第一个过滤器，然后把第一个过滤器的结果传递给下一个过滤器，实现方式
{{ message | filterA | filterB }}
过滤器也可以传递多可参数，例如：
{{ message | filterA('arg1', arg2) }}
注意，过滤器filterA 中，把message的值作为第一个参数，arg1作为第二个参数，arg2作为第三个参数
二、实现功能
增加减少商品个数
step1：在Vue对象的method中增加两个函数，sub(i)减少个数，add(i)增加个数，i为数组的index，在html中传入数组的index实现增加（减少）特定一本书的数量
add:function(i){
this.books[i].num++
},
sub:function(i){
this.books[i].num--;
}
step2：在html的增加（减少）按钮上绑定这两个函数
<button type="button" @click="sub(index)">-button>
{{item.num}}
<button type="button" @click="add(index)">+button>
step3:当数量小于1的时候不能再减少数量了，可以采用v-bind:disable=""
<button type="button" @click="sub(index)" :disabled="item.num<=1">-button>
删除
最外层加上一个 调用：v-if
<div class="ui container" v-if="books.length>0">
...
div>
<div class="ui container" v-else><h2 class="ui header">购物车为空h2>div>
计算总价格：使用computed计算属性
computed:{
finalPrice:function(){
let sum=0;
for(let i=0;i<this.books.length;i++){
sum=sum+this.books[i].price*this.books[i].num
}
return sum
}
}
<h2 class="ui header">总价格:{{finalPrice}}h2>
三、完整代码
bookShop.html中
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<link rel="stylesheet" type="text/css" href="bookShop.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
head>
<body>
<div id="app" v-cloak>
<div class="ui container" v-if="books.length>0">
<table class="ui table">
<thead>
<tr>
<th>th>
<th>书籍名称th>
<th>出版日期th>
<th>价格th>
<th>购买数量th>
<th>操作th>
tr>
thead>
<tbody>
<tr v-for="(item,index) in books">
<th >{{item.id}}th>
<th >{{item.name}}th>
<th >{{item.date}}th>
<th >{{item.price | getFinalPrice}}th>
<th >
<button type="button" @click="sub(index)" :disabled="item.num<=1">-button>
{{item.num}}
<button type="button" @click="add(index)">+button>
th>
<th><button type="button" @click="remove(index)">移除button>th>
tr>
tbody>
table>
<h2 class="ui header">总价格:{{finalPrice}}h2>
div>
<div class="ui container" v-else><h2 class="ui header">购物车为空h2>div>
div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js">script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js">script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
<script src="bookShop.js">script>
body>
html>
bookShop.js中const app=new Vue({
el:'#app',
data:{
books:[{
id:1,
name:"《算法导论1》",
price:10.00,
num:1,
date:"2020-6-20"
},{
id:2,
name:"《算法导论2》",
price:10.00,
num:1,
date:"2020-6-20"
},{
id:3,
name:"《算法导论3》",
price:10.00,
num:1,
date:"2020-6-20"
},{
id:3,
name:"《算法导论4》",
price:10.00,
num:1,
date:"2020-6-20"
}]
},
methods:{
add:function(i){
this.books[i].num++
},
sub:function(i){
this.books[i].num--;
},
remove:function(i){
this.books.splice(i,1);
}
},
filters:{//过滤器
getFinalPrice:function(price){
return '￥'+price.toFixed(2);
}
},
computed:{
finalPrice:function(){
let sum=0;
for(let i=0;i实现效果
