【Vue】Vue中通过动态修改Class样式（style）名称实现计算器或充值等功能（图文和完整示例）

本文链接：https://blog.csdn.net/dxnn520/article/details/123050234

还有一种点击实现方式：

<span @click="aaa=0" :class="{myClass:aaa==0}">点我改变样式</span>

友情提示，最全的点击这里：【Vue】Vue中实现单击click事件获取html元素和css样式的解决方法（持续更新中...）_【敦厚的曹操】的专栏-CSDN博客一、通过event获取 console.log(event.target); // 当前元素点击的子节点 console.log(event.currentTarget); // 当前Vue元素 var pro = event.currentTarget; // 当前元素 pro.lastElementChild.style.color = "#DE3E3E"; /https://blog.csdn.net/dxnn520/article/details/122956147

<!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>