Vue中组件的使用

原创于 2021-11-28 11:06:21 发布 · 490 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #css #js

本文介绍了如何使用Vue.js构建一个简单的计数器组件，并在列表中复用，实现每个计数器独立增减功能。通过template、data和methods的结合，展示了Vue组件的基础应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用Vue中的组件创建一个计数器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li><my-counter></li>
				<li><my-counter></li>
				<li><my-counter></li>
				

			</ul>
		</div>
		<script type="text/javascript">
			Vue.component('my-counter',{
				template:`<div>
				<button @click='minus'>-</button><span>{{n}}</span><button @click='add'>+</button>
				</div>`,
				data(){
					return {
						n:1
					}
				},
				methods:{
					minus(){
						this.n--;
						this.n==0&&(this.n=1)
					},
					add(){
						this.n++
					}
				}
			})
		</script>
		<script type="text/javascript">
			new Vue({
				el:"#app"
			})
		</script>
	</body>
</html>