快捷導(dǎo)航

Vue分別運(yùn)用class綁定和style綁定通過(guò)點(diǎn)擊實(shí)現(xiàn)樣式切換

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

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

Vue官方文檔

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

<div v-bind:class="[activeClass, errorClass]"></div>
可以簡(jiǎn)寫(xiě)成
<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>
        /* 點(diǎn)擊前的樣式 */
        .class1 {
            background-color: #fff;
            color: #333;
        }
        /* 點(diǎn)擊之后的樣式 */
        .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è)置點(diǎn)擊事件 -->
        <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('第一個(gè)點(diǎn)擊事件');
                },
                handler2(){
                    this.isYes2 = false,
                    this.isYes1 = true,
                    this.isYes3 = true,
                    console.log('第二個(gè)點(diǎn)擊事件');
                },
                handler3(){
                    this.isYes3 = false,
                    this.isYes2 = true,
                    this.isYes1 = true,
                    console.log('第三個(gè)點(diǎn)擊事件');
                },
            }
        })
    </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綁定，這里是表達(dá)式結(jié)果類型為字符串，為展示點(diǎn)擊按鈕改變樣式，使用的是三目運(yùn)算，
            在第一步中設(shè)置了一個(gè)可用于判斷的數(shù)據(jù)，如果該數(shù)據(jù)值和按鈕內(nèi)容一樣的話，則會(huì)觸發(fā)點(diǎn)擊事件，
            該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è)置一個(gè)數(shù)據(jù)來(lái)進(jìn)行判斷，其初始值設(shè)為空字符串，就會(huì)顯示原始樣式
                isActive: '',
                // 在數(shù)據(jù)模型中設(shè)置經(jīng)點(diǎn)擊后要變換的樣式，這里聲明一個(gè)對(duì)象，用在按鈕的綁定上,點(diǎn)擊后切換的樣式
                styCss: {
                    background: 'red',
                    color: 'white'
                }
            },
            methods: {
                // 為點(diǎn)擊事件實(shí)現(xiàn)三按鈕之間的互斥效果，即點(diǎn)擊一個(gè)按鈕，該按鈕的樣式改變，
                //其他的不變，點(diǎn)擊另一個(gè)時(shí)，前一個(gè)按鈕的樣式還原，當(dāng)前按鈕樣式改變，
                //那么就需要在點(diǎn)擊方法中添加將目標(biāo)源元素的文本值賦予需要進(jìn)行判斷的數(shù)據(jù)時(shí)，
                //當(dāng)點(diǎn)擊的按鈕的內(nèi)容和判斷的條件一樣時(shí)，成功觸發(fā)該點(diǎn)擊事件，實(shí)現(xiàn)切換并且改變樣式的效果。
                changeHandler(event) {
                    this.isActive = event.target.innerText
                }
            }
        })
    </script>
</body>
</html>

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

您可能感興趣的文章: