<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="con">
<h2>当前计数：{{counter}}</h2>
<!-- <button v-on:click="counter--">-</button>
<button v-on:click="counter++">+</button> -->
<!-- <button v-on:click="sub">-</button>
<button v-on:click="add">+</button> -->
<button @click="sub">-</button>
<button @click="add">+</button>
</div>
</body>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el: "#con",
data: {
counter:0
},
methods: {
add: function(){
// app.counter++
this.counter++
},
sub: function(){
// app.counter--
this.counter--
}
}
});
</script>
</html>vue实现计数器
2023-01-09
98
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
vue实现计数器
目录
相关文章
|
5天前
|
JavaScript
|
2天前
|
JavaScript
理解 Vue 的 setup 应用程序钩子
【10月更文挑战第3天】`setup` 函数是 Vue 3 中的新组件选项，在组件创建前调用，作为初始化逻辑的入口。它接收 `props` 和 `context` 两个参数，内部定义的变量和函数需通过 `return` 暴露给模板。`props` 包含父组件传入的属性，`context` 包含组件上下文信息。`setup` 可替代 `beforeCreate` 和 `created` 钩子，并提供类似 `data`、`computed` 和 `methods` 的功能，支持逻辑复用和 TypeScript 类型定义。
20
11
11
|
6天前
|
JavaScript
前端开发
IDE
|
6天前
|
JavaScript
前端开发
API
|
4天前
|
JavaScript
|
4天前
|
JavaScript
|
5天前
|
JavaScript
前端开发
|
4天前
|
JavaScript
|
5天前
|
JavaScript
前端开发
API
|
6天前
|
JavaScript
热门文章
最新文章
1
vite 如何做到让 vue 本地开发更快速？
2
VUE组件：如何在Vue中实现组件的动态引入？
3
【第12期】Vue3+TypeScript+Vite中动态引入图片等静态资源
4
VUE element-ui之form表单中input输入超过规定长度error提醒，并实时显示输入长度，可无限输入
5
手把手教你使用Vue3指定状态管理库--Pinia
6
前端vue给后端list集合对象传值
7
Vue3 自定义指令实现元素点击的节流与输入框的防抖,后端老哥再也不用担心我频繁发送请求了
8
精通React/Vue系列之实现一个全局提示(Message)组件
9
Vue中$watch()方法和watch属性的区别
10
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览