快捷導航

Vue分別運用class綁定和style綁定通過點擊實現(xiàn)樣式切換

更新時間：2023年07月13日 10:17:49 作者：夏茗星

這篇文章主要為大家介紹了Vue分別運用class綁定和style綁定通過點擊實現(xiàn)樣式切換，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

Vue官方文檔

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

<div v-bind:class="[activeClass, errorClass]"></div>
可以簡寫成
<div :class="[activeClass, errorClass]"></div>

class綁定

<!--
 * @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;
        }
        /* 給按鈕設(shè)置樣式 */
        button {
            width: 80px;
            height: 40px;
            border-radius: 5px;
            border: 2px solid rgb(179, 167, 167);
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 分別給按鈕設(shè)置點擊事件 -->
        <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>

style綁定

<!--
 * @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>
        /* 給按鈕設(shè)置樣式 */
        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綁定，這里是表達式結(jié)果類型為字符串，為展示點擊按鈕改變樣式，使用的是三目運算，
            在第一步中設(shè)置了一個可用于判斷的數(shù)據(jù)，如果該數(shù)據(jù)值和按鈕內(nèi)容一樣的話，則會觸發(fā)點擊事件，
            該style樣式設(shè)置為要改變的樣式，即data中設(shè)置的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: {
                // 設(shè)置一個數(shù)據(jù)來進行判斷，其初始值設(shè)為空字符串，就會顯示原始樣式
                isActive: '',
                // 在數(shù)據(jù)模型中設(shè)置經(jīng)點擊后要變換的樣式，這里聲明一個對象，用在按鈕的綁定上,點擊后切換的樣式
                styCss: {
                    background: 'red',
                    color: 'white'
                }
            },
            methods: {
                // 為點擊事件實現(xiàn)三按鈕之間的互斥效果，即點擊一個按鈕，該按鈕的樣式改變，
                //其他的不變，點擊另一個時，前一個按鈕的樣式還原，當前按鈕樣式改變，
                //那么就需要在點擊方法中添加將目標源元素的文本值賦予需要進行判斷的數(shù)據(jù)時，
                //當點擊的按鈕的內(nèi)容和判斷的條件一樣時，成功觸發(fā)該點擊事件，實現(xiàn)切換并且改變樣式的效果。
                changeHandler(event) {
                    this.isActive = event.target.innerText
                }
            }
        })
    </script>
</body>
</html>

以上就是Vue--分別運用class綁定和style綁定，通過點擊實現(xiàn)樣式的切換的詳細內(nèi)容，更多關(guān)于Vue-運用class style綁定點擊樣式切換的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: