【VUE】现在有一个text文本框，当点击一下按钮，让内容加1，请用vue写

最新推荐文章于 2023-01-18 11:02:18 发布

原创最新推荐文章于 2023-01-18 11:02:18 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

vue.js 专栏收录该内容

85 篇文章

订阅专栏

这篇博客展示了如何利用Vue.js框架，在一个HTML页面中创建一个文本框，并实现点击按钮后文本框内容自动加1的功能。通过定义Vue实例，设置data属性`num`并绑定到输入框，结合methods中的`add`方法更新数值，实现了简单的前端交互逻辑。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 现在有一个text文本框，当点击一下按钮，让内容加1，请用vue写 -->
		 <input type="text" id="" :value="num" />
			<button type="button" @click="add">+</button>
		</div>
	</body>
	
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data: {
			num:1,
		  },
		  methods:{
			  add(){
				 this.num+=1 
			  }
		  }
		})
	</script>
</html>