vue实现计数器

最新推荐文章于 2024-06-03 14:05:44 发布

无人不xiao

最新推荐文章于 2024-06-03 14:05:44 发布

阅读量1.5k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_45934659/article/details/108720930

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

vue实现简单的计数器
代码如下



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
	<title>vue.test01</title>
</head>
<body> 

	<div id="app">
	
		<input type="button" value="点我减1" @click="jian">
		<span>{{ num }}</span>
		<input type="button" value="点我加1" @click="add">
	</div>
	<div ></div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<script type="text/javascript">
	
		var vm = new Vue({
			el : '#app',
			data: {
				num:1
			},
			methods:{
			
				jian:function(){
					if(this.num>0){
						this.num--;
					}else{
						alert("你傻吗！！！！！！！！！！！！！！");
					}
				},
				add:function(){
					if(this.num<10){
						this.num++;
					}else{
						alert("你傻吗！！！！！！！！！！！！！！");
					}
				}
			},
			
		})
	</script>

</body>
</html>