iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue手动控制点击事件Click触发方式
  • 403
分享到

Vue手动控制点击事件Click触发方式

2024-04-02 19:04:59 403人浏览 泡泡鱼
摘要

目录手动控制点击事件Click触发方法一方法二Vue点击click事件解析废话不多说,先上代码手动控制点击事件Click触发 方法一 变量的值&&触发函数 方法二

手动控制点击事件Click触发

方法一

变量的值&&触发函数

在这里插入图片描述

方法二

利用变量控制css样式设置其pointer-event:none

在这里插入图片描述

Vue点击click事件解析

Vue算是前端技术比较火的一门技术了,所以在日常开发当中掌握它还是比较重要的,最近要用vue做一个移动端项目,趁着空闲的时间来简单的写一下demo,希望能够帮到大家:

废话不多说,先上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="./vue.js"></script>-->
    <script src="2.5.20-vue.js"></script>
</head>
<body>
<div id="app">
     //@click点击事件getMethod和getMethod()带不带小括号其实没多大的区别,vue在底层会把传过去的函数统一解析成为方法,带小括号说明有相应的实参传入方法体里面;
    <!--<p   @click="getMethod">aaaa</p>-->       
    <!--<p   @click="getMethodFun">aaaa</p>-->
    <p   @click="getMethod()">aaaa</p>
    <p   @click="getMethodFun()">bbbb</p>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                message: 'father',
                show: true
            };
        },
        methods: {
            getMethod () {      //点击事件的时候去寻找相应的方法,在底层做转换直接写方法名,大括号里面写相应的业务逻辑
                console.log('11');
            },
 //也可以采用匿名函数的写法定义方法名,然后进行调用这种方法也是可以的,只不过getMethod ()的写法更加简洁,但是在实际开发当中这个可是不支持的例如   aaFunc (){}         //直接这样写是会报错的,一定要注意;
            getMethodFun: function () {   
                console.log('22')
            }
        },
    });
</script>
</html>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: Vue手动控制点击事件Click触发方式

本文链接: https://www.lsjlt.com/news/163617.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue手动控制点击事件Click触发方式
    目录手动控制点击事件Click触发方法一方法二Vue点击click事件解析废话不多说,先上代码手动控制点击事件Click触发 方法一 变量的值&&触发函数 方法二 ...
    99+
    2022-11-13
  • vue中的主动触发点击事件
    目录主动触发点击事件如何自动触发点击事件模拟点击下载文件、图片主动触发点击事件 由vue代码触发点击事件,实现的效果是:点击按钮,触发 <input> 输入框点击事件,从...
    99+
    2022-11-13
  • Android实现触发html页面的Button控件点击事件方式
    在android开发中,往往有时会加载html界面,同时需要与之html里面的控件进行交互。这里简单介绍一下如何在android中触发加载的html界面的Button控件。 1...
    99+
    2022-06-06
    button HTML 事件 Android
  • Vue的Scroll滚动事件触发方式
    目录Scroll滚动事件触发例子监听Scroll事件无效Scroll滚动事件触发 切记 当你需要滚动事件触发 千万不要加 overflow-y: auto; 一旦加了 就 全是 0 ...
    99+
    2022-11-13
  • 怎么解决vue点击弹窗自动触发点击事件的问题
    这篇文章给大家分享的是有关怎么解决vue点击弹窗自动触发点击事件的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个...
    99+
    2023-06-15
  • vue点击弹窗自动触发点击事件的解决办法(模拟场景)
    业务场景:使用vue +element ui 的el-dialog,点击弹窗之后,默认加载第一个按钮的数据进行初始化。  div  指令: // 自动触发...
    99+
    2022-11-12
  • Vue的Scroll滚动事件触发方式是什么
    这篇文章主要介绍了Vue的Scroll滚动事件触发方式是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue的Scroll滚动事件触发方式是什么文章都会有所收获,下面我们一起来看看吧。Scroll滚动事件触...
    99+
    2023-06-30
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作