用vue实现点击加1

最新推荐文章于 2023-12-07 20:27:03 发布

原创最新推荐文章于 2023-12-07 20:27:03 发布 · 3.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

本文介绍了如何使用Vue.js来实现点击按钮时数字加1和减1的功能，最高加到999，最低减到1。提供了具体的HTML和JS代码示例。

用vue实现点击加1

点击加实现数字加1最高加到999
点击减实现数字减1最低减到1
代码如下：
html：

<div id="app">
	<p>
		<button @click="calc(-1)":disabled="num<=1">-</button>
		<input type="text"v-model="num" @change="check()">
		<button @click="calc(1)" :disabled="num>=999">+</button>
	</p>
</div>

js:

<script type="text/javascript">
	new Vue({
		el:"#app",
		data:{   
			num:1,
		},
		methods:{
			calc(n){
				this.num=this.num*1+n
			},
			check(){
				if(isNaN(this.num*1)){
					this.num = 1
				}
				if(this.num>999){this.num=999}
				if(this.num<1){this.num=1}
			}
		}
	})
</script>