用VUE實現購物車功能

HTML

<div id="app">
	單價：{{price}}元/件<br/>
	庫存：{{stock}}件<br/>
	選購：<span v-on:click="cut" class="cut">-</span><input name="num" type="text" class="num" v-on:input="inputunm" v-model="num"/><span v-on:click="add" class="add">+</span><br/>
	合計：{{total}}元
</div>

VUE-JS

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
 	el:"#app",
 	data:{
		price:998,//單價
		stock:10,//庫存
		num:0,//數量
	},
	computed:{
		//合計
		total:function(){
			return this.price*this.num;
		}
	},
	methods:{
		//減少數量
		cut:function(){
			if(this.num>0){
				this.num--;
			}
		},
		//增加數量
		add:function(){
			if(this.num<this.stock){
				this.num++;
			}
		},
		//正整數且不能超出庫存
		inputunm:function(){
			var regex = /^\+?[1-9][0-9]*$/;
			var status=regex.test(this.num);
			if(status){
				if(this.num>this.stock){
					this.num=this.stock;
				}		
			}else{
				this.num=0;
			}

		}
	}
})
</script>

CSS

<style>
.cut,.add{font-size:20px;}
.num{width:50px;text-align:center;}
</style>