一、通过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>

Logo

前往低代码交流专区

更多推荐