编写一个 Vue 应用程序,其中包含一个计数器和两个按钮。一个按钮用于增加计数器的值,另一个按钮用于减少计数器的值。计数器的初始值为 0。
时间: 2023-12-10 13:37:57 浏览: 31
以下是一个实现此功能的基本Vue应用程序:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Counter App</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<h1>{{ count }}</h1>
<button @click="incrementCount()">增加计数器</button>
<button @click="decrementCount()">减少计数器</button>
</div>
<script>
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
incrementCount: function () {
this.count++;
},
decrementCount: function () {
this.count--;
}
}
})
</script>
</body>
</html>
```
在此Vue应用程序中,我们使用Vue的模板语法来显示计数器的值。我们还定义了两个按钮,每个按钮都绑定到对应的方法。在方法中,我们更新count数据属性的值来实现计数器的增加和减少。