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

已于 2022-02-22 15:12:33 修改
阅读量5.6k 收藏 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>

敦厚的曹操
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue3 - 获取DOM元素并且修改元素样式示例源码，当点击一个元素（比如按钮、容器）需要用更改 style css 的样式（附带详细的功能示例及解决方案）
高级前端工程师
04-12 5238
vue3获取元素并修改元素样式，vue3.0点击修改元素的css样式，vue3怎么修改元素css属性，vue3动态的改变样式，vue3中动态style(动态修改伪元素样式)，Vue3获取DOM元素样式和样式更改示例，vue3通过ref获取dom元素并修改样式，Vue3中如何获取dom元素并修改样式，Vue3 动态修改dom样式，vue3获取dom元素节点并操作元素的样式，vue3.0 获取dom设置样式，Vue3获取DOM元素并修改属性的方法，vue3 怎么动态改变element内部dom元素的样式，vue
vue中读取文本文件内容_vue中读取本地文件
weixin_39849254的博客
12-20 4998
背景再项目开发过程中，有动态设置字体图标的需求，保证图标选框中的图标和最后发布的项目图标库一致。思路读取本地字体图标库文件，然后进行相应的字符串转换，这样就可以保持图标的一致啦步骤1、获取本地的文件const loadFile = function (name) { // name为文件所在位置let xhr = new XMLHttpRequest(),okStatus = document.l...
vue.js click点击事件获取当前元素对象的操作
12-28
Vue.js可以传递$event对象 <body id=app> 点击当前行文本 li2 li3 [removed] new Vue({ el: '#app', data: { message: 'Hello Vue.js!' }, methods: { say: function(msg, event) { //获取点击对象 var el = event.currentTarget; al
vue click点击获取点击元素
qq_43654065的博客
01-18 6601
<div @click="test">点击</div> //获取当前点击元素 var el = event.currentTarget currentTarget事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。即点击事件绑定在哪个元素，currentTarget获取的就是那一个元素。在捕获和起泡阶段，该属性是非常有用的，因为在这两个节点，它不同于target属性。 Event对象的一些兼容写法 // 获得event对象兼容性写法 event||(event
Vue typescript 获得html 元素
最新发布
MyFreeIT
04-24 295
【代码】Vue typescript 获得html 元素。
【Vue-day1】Vue获取Html标签中的值
m0_57450589的博客
03-03 7054
方法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 7464
//例子需求：当页面加载完毕后，页面中的文本框可以直接获取焦点（自动获取焦点） 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 7199
在vue中通过点击事件获取上一个标签、父标签、第一个子标签等元素。( 以下元素都是以所点击的元素进行查找 ) e.target 获取当前点击的元素 e.currentTarget 获取绑定事件的元素 e.currentTarget.previousElementSibling 获取前(上)一个元素 e.currentTarget.parentElement 获取父元素 e.currentTarget.firstElementChild 获取第一个子元素 e.currentTarget.nextElement
vue-其他ref获取dom元素.html
虾米大王的学习历程
05-25 381
【代码】vue-其他ref获取dom元素.html。
在vue中获取dom元素内容的方法
08-30
在 Vue 中获取 DOM 元素内容是开发者经常遇到的问题，而解决这个问题的方法很多，今天我们就来讨论其中的一种，即使用 ref 属性来获取 DOM 元素内容。 使用 ref 属性获取 DOM 元素内容是 Vue 中最常用的方法，这种...
vue在index.html中引入静态文件不生效问题及解决方法
10-17
记住，持续学习和理解Vue CLI的工作原理以及项目构建流程对于解决这类问题至关重要。同时，保持良好的编程习惯，如遵循框架的推荐配置，可以帮助避免许多不必要的问题。希望本文对你的Vue开发有所帮助，如果你在实践...
react、vue获取html标签显示在页面上
木白的博客
09-23 2351
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事件获取事件对象，获取事件源，获取当前元素，动态添加样式
imkaifan的博客
01-25 4247
vue事件获取事件对象，获取事件源，获取当前元素实际的一次应用代码中打印内容 1. js的事件，如点击事件，可以直接用this获取事件对象， 2. 而jQuery可以使用$(this)来获取事件对象。 3. vue必须借助事件的 event 对象 的 currentTarget 才能获取事件对象 v-on:click="onClick( $event)" onClick(e){ $(e.currentTarget) console.log(e) # 获得点击元素的前一
Vue （十二）样式属性
喜欢历史的码农
03-26 818
class="xxx"用来绑定动态的样式，可以在data、method里被使用。对象写法：绑定多个样式，个数确定、名字也确定，单需要动态决定用不用。写法：class="xxx" xxx可以是字符串、对象、数组。数组写法：绑定的样式个数不确定、名字也不确定。class="xxx" 用来指定固定的样式。2.class 固定写法和动态写法区分。字符串写法：类名不确定需要动态指定。2.class样式绑定。1.class 形式。
vue click事件获取当前元素属性
u011927449的博客
06-22 3208
Vue可以传递$event对象 <body id="app"> <ul> <li @click="say('hello!', $event)">点击当前行文本</li> <li>li2</li> <li>li3</li> </ul> <script> new Vue({ el: '#app', data: {
style css 里使用import和自定义的目录
杨咩咩
03-04 1634
import前面加 @ 符号 目录关键字前加 ~ 符号 例如： <style lang="stylus" scoped> @import '~styles/varibless.styl' </style> 注意：以上代码中自定义了styles牡蛎，目录定义为：vue项目中，在build的webpack.base.cong.js中 alias: { '...
触发onclick事件获取当前元素各个属性参数
Tarafireworks的博客
08-31 3781
自动生成元素的onclick事件 event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素 <a onclick="test()">点击我</a> <script> function test(){ var is=event.currentTarget; console.log($(is)); //获取当前元素，类同this console.log(event.target); //返回绑.
vue.js 追加html,vue.js 绑定HTML Class
weixin_29876591的博客
05-31 277
绑定HTML Class# 对象语法我们可以传给 v-bind:class 一个对象，以动态地切换 class 。上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值 。我们也可以在对象中传入更多属性用来动态切换多个 class 。此外， v-bind:class 指令可以与普通的 class 属性共存。如下模板:如下 data:isActive: true...
vue中使用print.js双重遍历获取打印dom
05-26
要使用Print.js在Vue中打印DOM，您需要遵循以下步骤： 1. 在Vue组件中安装Print.js： ``` npm install print-js ``` 2. 导入Print.js： ``` import PrintJS from 'print-js' ``` 3. 在Vue组件中编写打印代码。例如，如果您想打印具有“print”类的DOM元素，可以使用以下代码： ``` methods: { print() { PrintJS({ printable: 'print', // DOM元素的ID或类 type: 'html', documentTitle: 'Print Document' }) } } ``` 4. 在Vue模板中添加一个按钮，以便用户触发打印函数： ``` <template> <div> <button @click="print">Print</button> <div class="print">Print this!</div> </div> </template> ``` 5. 运行应用程序，单击“打印”按钮即可打印DOM元素。 请注意，Print.js提供了许多其他选项，例如自定义打印窗口的标题和CSS样式。有关更多详细信息，请参阅Print.js文档。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

敦厚的曹操

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

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

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

打赏作者

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

抵扣说明：

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

余额充值