五、伊森商城前端基础-Vue v-on & 事件修饰符 & 按键修饰符 & v-for & v-if 和v-show & v-else和v-else-if p24

131.313

已于 2022-12-05 21:07:04 修改

阅读量334

点赞数

文章标签：前端 javascript 开发语言

于 2022-12-04 22:35:51 首次发布

本文链接：https://blog.csdn.net/weixin_56220914/article/details/128177701

版权

本文详细讲解了Vue中的v-on指令用于事件监听，包括事件修饰符的使用，如防止事件冒泡和阻止默认行为。接着介绍了按键修饰符，特别是组合按键的应用。此外，还探讨了v-for指令在数据遍历渲染中的应用，以及v-if和v-show在条件渲染上的差异，最后讨论了v-else与v-else-if在复杂逻辑判断中的配合使用。

摘要由CSDN通过智能技术生成

1、v-on

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

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

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

<!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>Document</title>
</head>

<body>


    <div id="app">
        <!--事件中直接写 js 片段-->
        <button v-on:click="num++">点赞</button>
        <!--事件指定一个回调函数，必须是 Vue 实例中定义的函数-->
        <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` 提供了 事件修饰符 。修饰符是由 点开头的指令后缀 来

表示的。

- `.stop` ：阻止事件冒泡到父元素

- `.prevent` ：阻止默认事件发生

- `.capture` ：使用事件捕获模式

- `.self` ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）

- `.once` ：只执行一次

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compat

最低0.47元/天解锁文章

131.313

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

五、伊森商城 前端基础-Vue v-on & 事件修饰符 & 按键修饰符 & v-for & v-if 和v-show & v-else和v-else-if p24

1、v-on

2、事件修饰符

五、伊森商城前端基础-Vue v-on & 事件修饰符 & 按键修饰符 & v-for & v-if 和v-show & v-else和v-else-if p24