<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{goods.goodsName}}</p>
<button @click="handleReducer()">-</button>
<input type="text" v-model="goods.goodsNum">
<button @click="handleAdd()">+</button>
<p>单价：{{goods.goodsPrice}}</p>
<p>运费:{{goods.fee}}</p>
<p>总价:{{count}}</p>
</div>
</body>
</html>
<script src="./vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
goods:{
goodsName:"三只松鼠",
goodsPrice:33.3,
goodsNum:1,
fee:10
}
},
methods:{
handleReducer(){
if(this.goods.goodsNum>1){
this.goods.goodsNum--
}else{
this.goods.goodsNum = 1
}
},
handleAdd(){
this.goods.goodsNum++;
}
},
computed:{
count(){
let sum = (( this.goods.goodsPrice * 10) * this.goods.goodsNum)/10;
if(sum>=99){
return sum;
}else{
return sum+this.goods.fee;
}
}
}
})
/*
99 包邮
不满99 加10块钱运费
*/
</script>