博客列表 >Vue 计数器的实现

Vue 计数器的实现

P粉536129282
P粉536129282原创
2022年03月03日 17:46:36811浏览

目录
1、计数器的实现
2、实现效果

1、计数器的实现
在页面上简单实现一个计数器:
`<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>

<body>

<div id="app">
<h3>当前计数器:{{counter}}</h3>
<button @click="add">+</button>
<button @click="minutes">-</button>
</div>

<script>
const app = new Vue({
el: “#app”,
data: {
counter: 0
},
methods: {
add: function () {
this.counter++;
},
minutes: function () {
this.counter—;
}
}
})
</script>
</body>
</html>`
2、实现效果
最后实现的效果,看gif图:

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议