关于vue.js:Vue分别运用class绑定和style绑定通过点击实现样式的切换

放一下 Vue 官网文档

https://cn.vuejs.org/v2/guide…

<div v-bind:class="[activeClass, errorClass]"></div>

能够简写成

<div :class="[activeClass, errorClass]"></div>

<!--
 * @Author: [you name]
 * @Date: 2021-10-08 15:15:52
 * @LastEditors: [you name]
 * @LastEditTime: 2021-10-08 22:46:18
 * @Description: 
-->
<!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>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <style>
        /* 点击前的款式 */
        .class1 {
            background-color: #fff;
            color: #333;
        }

        /* 点击之后的款式 */
        .class2 {
            background-color: #f52819;
            color: #fff;
        }

        /* 给按钮设置款式 */
        button {
            width: 80px;
            height: 40px;
            border-radius: 5px;
            border: 2px solid rgb(179, 167, 167);
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 别离给按钮设置点击事件 -->
        <button @click='handler1' :class="[isYes1?'class1':'class2']"> 按钮 1 </button>
        <button @click='handler2' :class="[isYes2?'class1':'class2']"> 按钮 2 </button>
        <button @click='handler3' :class="[isYes3?'class1':'class2']"> 按钮 3 </button>

    </div>
    <script>
        // 第二种办法

        let vm = new Vue({
            el:'#app',
            data:{
                isYes1:true,
                isYes2:true,
                isYes3:true,
            },
            methods:{handler1(){
                    this.isYes1 = false,
                    this.isYes2 = true,
                    this.isYes3 = true,
                    console.log('第一个点击事件');

                },
                handler2(){
                    this.isYes2 = false,
                    this.isYes1 = true,
                    this.isYes3 = true,
                    console.log('第二个点击事件');

                },
                handler3(){
                    this.isYes3 = false,
                    this.isYes2 = true,
                    this.isYes1 = true,
                    console.log('第三个点击事件');

                },
            }
        })

    </script>
</body>

</html>

<!--
 * @Author: [you name]
 * @Date: 2021-10-08 15:15:52
 * @LastEditors: [you name]
 * @LastEditTime: 2021-10-08 22:54:40
 * @Description: 
-->
<!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>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <style>
        /* 给按钮设置款式 */
        button {
            width: 80px;
            height: 40px;
            border-radius: 5px;
            border: 2px solid rgb(179, 167, 167);
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- style 绑定，这里是表达式后果类型为字符串，为展现点击按钮扭转款式，应用的是三目运算，在第一步中设置了一个可用于判断的数据，如果该数据值和按钮内容一样的话，则会触发点击事件，该 style 款式设置为要扭转的款式，即 data 中设置的 styCss 款式 -->
        <button :style='isActive ==" 按钮 1"? styCss :""' @click='changeHandler'> 按钮 1 </button>
        <button :style='isActive ==" 按钮 2"? styCss :""' @click='changeHandler'> 按钮 2 </button>
        <button :style='isActive ==" 按钮 3"? styCss :""' @click='changeHandler'> 按钮 3 </button>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                // 设置一个数据来进行判断，其初始值设为空字符串，就会显示原始款式
                isActive: '',
                // 在数据模型中设置经点击后要变换的款式，这里申明一个对象，用在按钮的绑定上, 点击后切换的款式
                styCss: {
                    background: 'red',
                    color: 'white'
                }
            },
            methods: {
                // 为点击事件实现三按钮之间的互斥成果，即点击一个按钮，该按钮的款式扭转，// 其余的不变，点击另一个时，前一个按钮的款式还原，以后按钮款式扭转，// 那么就须要在点击办法中增加将指标源元素的文本值赋予须要进行判断的数据时，// 当点击的按钮的内容和判断的条件一样时，胜利触发该点击事件，实现切换并且扭转款式的成果。changeHandler(event) {this.isActive = event.target.innerText}

            }
        })

    </script>
</body>

</html>

class 绑定

style 绑定