vue中v-on指令的使用之Vue知识点归纳(四)

本文章中描述

  • v-on 指令的基本使用
  • 点击按钮动态修改数据

1 简述

vue 中 v-on 指令简单点来讲,是用来给元素设置绑定事件。

格式

v-on:事件名称="方法名称"
这里的事件名称如:click 单击,dblclick 双击等等
这里的方法名称随机定义,指的是触发事件后所调用的方法

这是定义的方法名称,在 vue 实例中的 methods 属性中实现。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=divice-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue v-on指令</title>
</head>

<body>
    <div id="app">
        <!-- 直接引用 -->
        <!-- 单击事件 -->
        <h3 v-on:click="login"> 登录</h3>
        <!-- 鼠标指针进入(穿过)元素时 -->
        <h3 v-on:monseenter="login2"> 第二次登录</h3>
        <!-- 双击事件 -->
        <h3 v-on:dblclick="login3"> 第三登录</h3>
       

        <!-- 简写方式 -->
        <!-- 用 @ 来替换 v-on: 达到简写方式 -->
        <h3 @click="login"> 登录</h3>
        <h3 @monseenter="login2"> 第二次登录</h3>
        <h3 @dblclick="login3"> 第三登录</h3>
       
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                login:function(){
                        alert("测试");
                },
                login2:function(){

                },
                login3:function(){
                    
                }
            },
        })
    </script>
</body>

</html>

在这里插入图片描述

2 点击按钮更新数据

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=divice-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue v-on指令</title>
</head>

<body>
    <div id="app">

        <h3 v-on:click="updateText"> 点击修改文本</h3>

        <p> 这里是显示的文本 {{message}} </p>

    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "哈哈 我的一个小疯子"
            },
            methods: {
                updateText: function () {

                    // 在这里通过 this 关键字来引用 data 中定义的变量关键字
                    this.message = "这里是更新后显示的文本";
                },

            },
        })
    </script>
</body>

</html>

效果图:
在这里插入图片描述
点击后:
在这里插入图片描述

3 程序计数器实现

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=divice-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue 程序计数器</title>
</head>

<body>
    <div id="app">
        <button @click="sub">-</button>
        {{ count }}
        <button @click="add">+</button>
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                count: 1,
            },
            methods: {
                add: function () {
                    if (this.count < 10) {
                        this.count++;
                    } else {
                        alert("不可以大于10");
                    }
                },
                sub: function () {
                    if (this.count > 0) {
                        this.count--;
                    } else {
                        alert("不可小于0");
                    }
                }
            },
        })
    </script>
</body>

</html>

在这里插入图片描述

4 总结

在这里插入图片描述

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页