vue事件绑定指令
2022/3/1 6:23:32
本文主要是介绍vue事件绑定指令,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
参考来源:
黑马程序员Vue全套视频教程,从vue2.0到vue3.0一套全覆盖,前端必会的框架教程_哔哩哔哩_bilibili
功能:
点击按钮,增加减少count
效果展示:
事件绑定指令:
v-on:简写为'@'
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>title</title> </head> <body> <div id="app"> <p>count的值是:{{ count }}</p> <button @click="add(3)">+ n</button> <button @click="sub(4)">- n</button> </div> <!-- 导入vue的库文件 --> <script src="./lib/vue-2.6.12.js"></script> <!-- 创建vue的实例对象 --> <script> const vm = new Vue({ // 表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器 el: '#app', // data对象就是要渲染到页面上的数据 data: { count: 0, }, // 定义事件的处理函数 methods: { add (n) { this.count += n; }, sub (n) { this.count -= n; } } }) </script> </body> </html>
这篇关于vue事件绑定指令的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist