五、伊森商城前端基础-Vue p24

1、v-on

2、事件修饰符

3、按键修饰符

3.1、组合按钮

1、v-on

v-on 指令用于给页面元素绑定事件。

语法： v-on: 事件名 ="js 片段或函数名 "

事件绑定可以简写，例如 `v-on:click='add'` 可以简写为 `@click='add'`


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>Documenttitle>
head>
 
<body>
 
 
    <div id="app">
        
        <button v-on:click="num++">点赞button>
        
        <button v-on:click="decrement">取消button>
        <h1>有{
  {num}}个赞h1>
    div>
    <script src="../node_modules/vue/dist/vue.js">script>
    
    <script type="text/javascript">
        let vm = new Vue({
            el: "#app",
            data: {
                num: 100
            },
            methods: {
                decrement() {
                    this.num--; //要使用 data 中的属性，必须 this.属性名
                }
            }
        })
    script>
 
body>
 
html>

2、事件修饰符

在事件处理程序中调用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常见的

需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，

而不是去处理 DOM 事件细节。

为了解决这个问题， Vue.js 为 `v-on` 提供了

相关阅读:
WinRT: 可能是 Windows 上最好用的 Native ABI 和远程调用方案
国内 11 家通过备案的 AI 大模型产品
技术面经总结
最简单的laravel不使用任何扩展导出csv
Chromebook文件夹应用新功能
LAXCUS分布式操作系统6.0 RP1版本正式发布
git pull 报错 error object file is empty , The remote end hung up unexpectedly
Linux|奇怪的知识|一次性任务at命令的使用
【华为OD机试真题 python】拼接url【2022 Q4 | 100分】
layui--table里使用switch

原文地址：https://blog.csdn.net/weixin_56220914/article/details/128177701

五、伊森商城 前端基础-Vue p24

1、v-on

2、事件修饰符

五、伊森商城前端基础-Vue p24