【Vue】Vue中实现单击click事件获取html元素和css样式的解决方法（持续更新中...）

已于 2022-02-22 15:12:33 修改
阅读量5.9k 收藏 6
点赞数 1
分类专栏： 26.【Vue】 文章标签： vue.js css html
于 2022-02-16 09:18:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dxnn520/article/details/122956147
版权

一、通过event获取

                console.log(event.target); // 当前元素点击的子节点
                console.log(event.currentTarget);  // 当前Vue元素


                var pro = event.currentTarget;   // 当前元素

                pro.lastElementChild.style.color = "#DE3E3E"; // 修改最后一个子节点，改变图标和文字颜色

                console.log(pro.getAttribute('name'));  // 获取html元素属性值

二、如果click事件传参数，需要设置$event来获取。

<div class="bar_menu" v-on:click="showInfo(1,$event)" name="1"></div>


<script type="text/javascript">


    var bottom_bar = new Vue({
        el: '#bottom_bar',
        data: {
            img_1: "images/bar_1_select"
        },
        methods: {
            showInfo(s,event) {

                // console.log(event.target); // 当前元素
                console.log(event.currentTarget);  // vue元素
                var pro = event.currentTarget;   // 当前元素
                pro.lastElementChild.style.color = "#DE3E3E";

            }

        }
    })
</script>

三、vue动态修改class=的三种方法

 

<!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>
<script type="text/javascript" src="vue.js"></script>

<style>
    #root {
        background-color: rgb(245, 245, 245);
        width: 400px;
        height: 250px;
        padding: 20px 20px 20px 50px;
    }

    .select {
        margin-top: 20px;
        margin-bottom: 20px;
        overflow: hidden;
        /* color:white; */
    }

    .box{
        float: left;
        height: 80px;
        width: 80px;
        background-color: rgb(255, 255, 255);
        margin-left: 20px;
        line-height: 70px;
        text-align: center;
        border-radius: 10px;
        border: 1px rgb(212, 211, 211) solid;
        /* font-size: 20px; */
    }

    .box_green {
        float: left;
        height: 80px;
        width: 80px;
        background-color: rgb(4, 112, 49);
        margin-left: 20px;
        line-height: 70px;
        text-align: center;
        border-radius: 10px;
        border: 1px rgb(212, 211, 211) solid;
        color:white;
        /* font-size: 20px; */
    }

    .box_black {
        float: left;
        height: 80px;
        width: 80px;
        background-color: rgb(0, 0, 0);
        margin-left: 20px;
        line-height: 70px;
        text-align: center;
        border-radius: 10px;
        border: 1px rgb(248, 2, 2) solid;
        color:white;  
    }

    .box_red {
        float: left;
        height: 80px;
        width: 80px;
        background-color: rgb(251, 0, 0);
        margin-left: 20px;
        line-height: 70px;
        text-align: center;
        border-radius: 10px;
        border: 1px rgb(248, 2, 2) solid;
        color:white;
    }

    button {
        margin-top: 30px;
        margin-left: 40px;
        width: 220px;
        height: 60px;
        border-radius: 10px;
        background-color: rgb(9, 79, 170);
        color: antiquewhite;
        font-size: 20px;
    }
</style>

<body>

    <div id="root">

        <!-- 第1种方式-更改【class名称】的【字符串】写法，改变量，改样式 -->
        <div class="box" :class="class_1">10元</div>
        
        
        <!-- 第2种方式 - 【数组】的形式替换,绑定的class个数不确定，名称也不确定 -->
        <div class="box" :class="classArr">20元</div>

        <!-- 第3种方式 - 【两种样式】切换方式修改 -->
        <div class="box" :class="classObj">30元</div>


        <div>
            <button @click="hand">点击改变</button>
        </div>
    </div>


    <script type="text/javascript">

        Vue.config.productionTip = false;
        var root = new Vue({

            el: '#root',
            data: {
                class_1:"box",
                classArr:["","box_green",""],
                classObj:{
                    box_black:false,
                    box_red:true,
                }

            },
            methods: {
                hand() {

                    // 修改第1个DIV - 10元样式
                    this.class_1="box_green";
                    // this.classArr=this.classArr[0];

                    // 修改第2个DIV样式,让其中一个数组有样式内容

                    Vue.set(root.classArr,0,"");
                    Vue.set(root.classArr,1,"");
                    Vue.set(root.classArr,2,"box_black");

                    // 修改第3个DIV样式
              
                    this.classObj.box_black=true;
                    this.classObj.box_red=false;

                }

            }
        })


    </script>
</body>

</html>

四、vue动态修改style=“”的三种方法

<!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>
<script type="text/javascript" src="vue.js"></script>

<style>
    #root {
        background-color: rgb(245, 245, 245);
        width: 400px;
        height: 250px;
        padding: 20px 20px 20px 50px;
    }

    .select {
        margin-top: 20px;
        margin-bottom: 20px;
        overflow: hidden;
    }

    .box {
        float: left;
        height: 80px;
        width: 80px;
        background-color: rgb(255, 255, 255);
        margin-left: 20px;
        line-height: 70px;
        text-align: center;
        border-radius: 10px;
        border: 1px rgb(212, 211, 211) solid;
        /* font-size: 20px; */
    }

    .box_select {
        float: left;
        height: 80px;
        width: 80px;
        background-color: rgb(255, 255, 255);
        margin-left: 20px;
        line-height: 70px;
        text-align: center;
        border-radius: 10px;
        border: 1px rgb(248, 2, 2) solid;
        /* font-size: 20px; */
    }

    button {
        margin-top: 30px;
        margin-left: 40px;
        width: 220px;
        height: 60px;
        border-radius: 10px;
        background-color: rgb(9, 79, 170);
        color: antiquewhite;
        font-size: 20px;
    }
</style>

<body>

    <div id="root">

        <!-- 第1种方式-属性【参数】的形式值修改 -->
        <div class="box" :style="{color: m_color,fontSize: fsize+'px'}">{{m_value}}元</div>

        <!-- 第2种方式 - 整个属性【字符串】的形式替换方式修改 -->
        <div class="box" :style="s_color">{{m_value}}元</div>

        <!-- 第3种方式 - 【标准格式组】方式修改 -->
        <div class="box" :style="styleObj">{{m_value}}元</div>

        <!-- <div class="box" :style="{fontSize: fsize+'px'}">{{m_value}}元</div> -->

        <div>
            <button @click="hand">点击获取到充值金额</button>

        </div>
    </div>


    <script type="text/javascript">

        Vue.config.productionTip = false;
        var root = new Vue({

            el: '#root',
            data: {
                number: ["10", "20", "50"],
                m_value: 30,
                fsize: 20,
                m_color: "red",
                s_color: "color: green;fontSize:20px",
                styleObj: {
                    fontSize: '25px',
                    color: 'orange',
                    backgroundColor: 'black'
                }

            },
            methods: {
                hand() {

                    // 修改第1个DIV样式
                    this.fsize=30;
                    this.m_color="black";
                    // 修改第2个DIV样式
                    this.s_color="color:orange;fontSize:25px",
                    // 修改第3个DIV样式
                    this.styleObj = {
                        fontSize: '20px',
                        color: 'white',
                        backgroundColor: 'red'
                    }

                    // alert(this.s_color);
                }

            }
        })


    </script>
</body>

</html>

五、通过动态修改Class样式（style）名称实现计算器或充值等功能

<!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>
<script type="text/javascript" src="vue.js"></script>
 
<style>
    #root {
        background-color: rgb(245, 245, 245);
        width: 400px;
        height: 250px;
        padding: 20px 20px 20px 50px;
    }
 
    .select {
        margin-top: 20px;
        margin-bottom: 20px;
        overflow: hidden;
    }
 
    .box {
        float: left;
        height: 80px;
        width: 80px;
        background-color: rgb(255, 255, 255);
        margin-left: 20px;
        line-height: 70px;
        text-align: center;
        border-radius: 10px;
        border: 1px rgb(212, 211, 211) solid;
        font-size: 20px;
    }
 
    .box_select {
        float: left;
        height: 80px;
        width: 80px;
        background-color: rgb(255, 255, 255);
        margin-left: 20px;
        line-height: 70px;
        text-align: center;
        border-radius: 10px;
        border: 1px rgb(248, 2, 2) solid;
        font-size: 20px;
    }
 
    button {
        margin-left: 40px;
        width: 220px;
        height: 60px;
        border-radius: 10px;
        background-color: rgb(9, 79, 170);
        color: antiquewhite;
        font-size: 20px;
    }
</style>
 
<body>
 
    <div id="root">
 
        <div class="money">
 
            请输入充值金额：
            <input type="text" placeholder="请输入或选择金额：" v-model:value="m_value">
        </div>
        <div class="select">
 
            <div class="box" :class="m_style[0]" @click="change(0)">{{number[0]}}元</div>
            <div class="box" :class="m_style[1]" @click="change(1)">{{number[1]}}元</div>
            <div class="box" :class="m_style[2]" @click="change(2)">{{number[2]}}元</div>
 
        </div>
        <div>
            <button @click="hand">点击获取到充值金额</button>
        </div>
 
 
    </div>
 
 
    <script type="text/javascript">
 
        Vue.config.productionTip = false;
        var root = new Vue({
 
            el: '#root',
            data: {
                m_style: ["box", "box", "box"],
                number:["10","20","50"],
                m_value:0
                
            },
            methods: {
                change(a) {
                    // 把所有元素初始化样式为box
                    for (let i = 0; i < this.m_style.length; i++) {
                        Vue.set(this.m_style, i, "box");    
                    }
                     this.m_value=this.number[a];
                    // 修改当前点击元素为新样式
                    Vue.set(this.m_style, a, "box_select");
                },
                hand(){
                    alert(this.m_value);
                }
 
            }
 
        })
 
 
    </script>
</body>
 
</html>

敦厚的曹操
关注
专栏目录
vue中读取文本文件内容_vue中读取本地文件
weixin_39849254的博客
12-20 5083
背景再项目开发过程中，有动态设置字体图标的需求，保证图标选框中的图标和最后发布的项目图标库一致。思路读取本地字体图标库文件，然后进行相应的字符串转换，这样就可以保持图标的一致啦步骤1、获取本地的文件const loadFile = function (name) { // name为文件所在位置let xhr = new XMLHttpRequest(),okStatus = document.l...
vue获取拼接的html代码元素或方法：使用Windows 附：vue地图使用地图插件
qq_22905801的博客
01-03 104
/ 使用_this可以继续调用vue中的属性和方法，也可以完成绑定事件。使用：”window.方法名 ”来获取后期拼接的元素。
Vue Vue绑定HTML和Class
SillyBoy的博客
06-29 161
文章目录绑定HTMLClass动态切换class和style动态切换style动态切换classtemplate 绑定HTMLClass 对象语法 v-bind:class="{样式名=布尔值表达式}"。若布尔值为true则添加此样式，否则不添加。 根据计算属性返回一个对象： v-bind:class=“计算属性名” computed:{ 计算属性名:function(){ return:{ 样式名：布尔值, //若布尔值为true则样式生效，否则无效。
CSS添加“点击事件”，纯css属性添加
最新发布
weixin_72299343的博客
08-24 731
今天来了解一下什么是css专有的“点击事件”，首先呢我们需要了解一下什么是点击事件点击事件是指当用户使用鼠标或触摸屏点击网页上的某个元素时触发的一种交互行为。它可以让你为元素在不同状态下（鼠标悬停和未悬停）定义不同的样式，从而创建出更动态和交互式的网页效果。简单点来说，就是你在图片或者文字等地方进行了点击而引导出来的跳转链接，图片变化，菜单展开或收缩等等出现的情况我们称之为点击事件。等等一系列的属性，而我们如何想要使图片或者文字，点击之后会跳转，看下面举例。点击图片，实现图片的放大或缩小。
Vue typescript 获得html 元素
MyFreeIT
04-24 413
【代码】Vue typescript 获得html 元素。
vue-其他ref获取dom元素.html
虾米大王的学习历程
05-25 417
【代码】vue-其他ref获取dom元素.html。
Vue点击事件获取当前元素html
qq_37582010的博客
10-10 2628
想实现类似jquery里的$(this).html() 这里需要用给click事件添加$event参数 @click="buyProduct($event)" 在methods里buyProduct方法接收参数 buyProduct (event) { // event.target 当前点击的元素 // event.currentTarget 当前绑定事件的元素 // event.cu...
vue的事件绑定与方法详解
12-09
在Vue中，事件绑定和方法的使用是核心功能之一，使得数据交互和UI控制变得简单易行。以下是关于Vue事件绑定与方法的详细解释： 一、事件绑定 Vue 使用 `v-on` 指令来绑定事件监听器。例如，若要绑定一个点击事件，...
《vue应用程序开发-Vue.js内置指令》.pptx
05-13
- **功能**: `v-once` 指令仅渲染元素和组件一次。在后续的重新渲染过程中，使用了此指令的元素及其所有子节点都将被视为静态内容并被跳过。这对于提高性能非常有用，尤其是在大型应用中。 - **示例代码**: ```html...
实现Vue 电脑端 PC端 鼠标拖拽横向移动 & 鼠标事件mousedown mouseup mousemove和单击事件click冲突问题& 盒模型冲撞取消拖拽状态问题
TVM的博客
07-30 5176
<1>.已实现功能 1.PC端Vue项目(或html)实现鼠标左右拖拽盒子滑动 2.同一盒子上鼠标移入移出事件和单击事件click冲突问题 3.子盒子移动,如何让边界不超出父盒子边界? 注意: 本文主要涉及到PC端鼠标横向拖拽问题的解决,移动端的解决方案很多,请详见其他文章,不在这里赘述. <2>.代码及原理 需求描述:横向有一个菜单栏, 菜单tab过多,让他实现左右可以拖拽滑动 我们设置一个大盒子grand, 然后是父盒子parent和子盒子child. 其中gran
vue中v-for循环选中点击的元素并对该元素添加样式操作
11-20
相信大家都会遇到这种情况：v-for循环时，我只需要点击到的...<div xss=removed class = 'addclass:isactive' click='onclick()'> <span>{{item.name}} css： .addclass{ color : red; } js： data:{ items :
前端速成教程（HTML、CSS、JS、Vue…）
www.h y p e r p l a s m a.top
05-06 3400
JavaWeb开发 SSM框架基础 前端速成——HTML、CSS、JS、Vue、Ajax、前端工程化。Web技术教程：W3Schoo。Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。Vue-cli是Vue官方提供的一个脚手架，用于快速生成Vue项目模板。
Vue获取DOM元素样式 && 样式更改
weixin_34226706的博客
02-09 1442
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 'style' is not definde的错误， 这时候可以在 mounted 里用 $refs 来获取样式，并进行更改： <template> <div style="display: block;" ref="abc"> <!-- ... --&g...
vue click点击获取点击元素
qq_43654065的博客
01-18 6690
<div @click="test">点击</div> //获取当前点击元素 var el = event.currentTarget currentTarget事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。即点击事件绑定在哪个元素，currentTarget获取的就是那一个元素。在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于target属性。 Event对象的一些兼容写法 // 获得event对象兼容性写法 event||(event
【Vue-day1】Vue获取Html标签中的值
m0_57450589的博客
03-03 7251
方法1：在自定义函数中加上$event，在js函数中可以获取到点击事件的标签，从而获取对应标签的值，易于分离。 Html代码： <a href="javascript:;" @click="getCity($event)">北京</a> Js代码： getCity:function(event){ console.log(event.target.innerHTML); } 方法2：vue的ref和$refs方法（在Js中test不知道如何分离多...
vue3使用7--ref获取html页面元素
chencaw的专栏
08-26 8141
//例子需求：当页面加载完毕后，页面中的文本框可以直接获取焦点（自动获取焦点） 1、代码 <template> <h2>ref的另一个作用：可以获取页面中的元素</h2> <input type="text" ref="inputRef" /> </template> <script lang="ts"> import { defineComponent, onMounted, ref} from 'vue' expo..
vue中点击获取相应元素
ZZHK666的博客
02-11 7321
在vue中通过点击事件获取上一个标签、父标签、第一个子标签等元素。( 以下元素都是以所点击的元素进行查找 ) e.target 获取当前点击的元素 e.currentTarget 获取绑定事件的元素 e.currentTarget.previousElementSibling 获取前(上)一个元素 e.currentTarget.parentElement 获取父元素 e.currentTarget.firstElementChild 获取第一个子元素 e.currentTarget.nextElement
vue获取原生html节点,vue是如何获取元素节点 ？
weixin_39998881的博客
05-31 1956
document.getelement之类的语句来操作dom;api，用 ref 来获取节点；首先先用ref在元素上面做一个标记，然后用this.$refs.标记名来获取元素代码：document{{ message }}new Vue({el: '#app',data() {return {message: 'hello 肾虚少年'}},mounted() {alert(this.$refs.p...
react、vue获取html标签显示在页面上
木白的博客
09-23 2374
React： &lt;div dangerouslySetInnerHTML = {{ __html:this.state.show.description }}&gt;&lt;/div&gt; Vue: &lt;div v-html="my_html"&gt;&lt;/div&gt;  
Vue.js 实现导航切换内容组件示例
- `v-bind:key`确保每个菜单项在渲染时有唯一的标识，`@click`事件监听器处理导航点击行为，调用`tabPrimary`方法更新当前选中的菜单项。 3. **嵌套导航**: - 如果某个菜单项的`secondNav`属性为`true`，表示它...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

敦厚的曹操

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值