Vue Unit Price Changing Event As Qty change sync..ly

sinat_16664531

于 2020-07-03 22:34:27 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/sinat_16664531/article/details/107116707

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>unit price changing</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-html="message"></div>
   <button @click="count--">-</button>{{count}}<button @click="count++">+</button>

Total Price is: {{total}}
</div>

<script>
new Vue({
el: '#app',
data: {
message: '<h1>unit price changing</h1>',
   count:3
},
   computed:{
   total(){
let price = 0;
let count = this.count;
if(count<2&&count>=0){
price =3
}
else if(count<5){
price =2
}
else if(count<=10){
price =1
}
   else{
price =0.5
}
return price*count
}
   }

})
</script>
</body>
</html>