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

 更新时间:2022年01月25日 08:44:05   作者:梅长弓  
这篇文章主要介绍了Vue手动控制点击事件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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue element el-table-column中对日期进行格式化方式(全局过滤器)

    Vue element el-table-column中对日期进行格式化方式(全局过滤器)

    这篇文章主要介绍了Vue element el-table-column中对日期进行格式化方式(全局过滤器),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • 基于Vue3封装实现图片查看器

    基于Vue3封装实现图片查看器

    这篇文章主要为大家详细介绍了如何基于Vue3封装实现一个图片查看器,可以点击图片放大和关闭放大的图片,感兴趣的小伙伴可以了解一下
    2025-02-02
  • Vue.js中computed属性高效的数据处理案例

    Vue.js中computed属性高效的数据处理案例

    computed是Vue中一个计算属性,它可以根据依赖的数据动态计算出一个新的值,并将其缓存起来,这篇文章主要给大家介绍了关于Vue.js中computed属性高效的数据处理的相关资料,需要的朋友可以参考下
    2024-09-09
  • element表格行列的动态合并示例详解

    element表格行列的动态合并示例详解

    这篇文章主要为大家介绍了element表格行列的动态合并示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue把输入框的内容添加到页面的实例讲解

    vue把输入框的内容添加到页面的实例讲解

    在本篇文章里小编给大家整理的是关于vue把输入框的内容添加到页面的实例以及相关知识点,需要的朋友们学习下。
    2019-11-11
  • Vue数据更新但页面没有更新的多种情况问题及解决

    Vue数据更新但页面没有更新的多种情况问题及解决

    这篇文章主要介绍了Vue数据更新但页面没有更新的多种情况问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • vue中如何实现复制内容到剪切板详解

    vue中如何实现复制内容到剪切板详解

    有些业务需求需要点击按钮复制链接,下面这篇文章主要给大家介绍了关于vue中如何实现复制内容到剪切板的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • 记一次Vue.js混入mixin的使用(分权限管理页面)

    记一次Vue.js混入mixin的使用(分权限管理页面)

    这篇文章主要介绍了记一次Vue.js混入mixin的使用(分权限管理页面),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • vue+echarts实现条纹柱状横向图

    vue+echarts实现条纹柱状横向图

    这篇文章主要为大家详细介绍了vue+echarts实现条纹柱状横向图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • vue3的setup语法糖简单封装ckediter的过程

    vue3的setup语法糖简单封装ckediter的过程

    Vue3官方提供了 script setup 语法糖,只需在script标签中添加setup,组件只需引入不用注册,属性和方法也不用返回,今天通过本文给大家分享vue3的setup语法糖简单封装ckediter的过程,感兴趣的朋友一起看看吧
    2023-10-10

最新评论