vue 動(dòng)態(tài)改變 class 屬性

學(xué)習(xí)vue,做一個(gè)小demo,第一步需求是點(diǎn)擊相應(yīng)的色塊會(huì)變色餐抢,再次點(diǎn)擊會(huì)還原。當(dāng)時(shí)思想是在 data 中用一個(gè)數(shù)組去記錄每個(gè)色塊的點(diǎn)擊狀態(tài)低匙,在組件上綁定該數(shù)組旷痕,從而動(dòng)態(tài)改變 class ,但是實(shí)際上 class 并沒(méi)有動(dòng)態(tài)改變努咐。


效果圖.png

代碼如下:
six-in-nine-vue.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>six-in-nine-vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="./six-in-nine-vue.css">
</head>
<body>
<div class="wrap" id="js-wrap">
    <div class="w-line" v-for="(line, line_idx) in num_list">
        <div class="w-l-item"
             :class="{'default-color': !clicked_list[line_idx * 3 + item_idx], 'clicked-color': clicked_list[line_idx * 3 + item_idx]}"
             v-for="(item, item_idx) in line"
             @click="clickBtn(line_idx * 3 + item_idx)">
            <div class="item-wrap">
                {{item}}
                <!--{{ clicked_list[line_idx * 3 + item_idx] }}-->
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src="six-in-nine-vue.js"></script>

six-in-nine-vue.css

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

.wrap {
    padding: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;

    display: flex;
    flex-direction: column;
}

.w-line {
    flex-grow: 1;
    background-color: #f6f6f6;

    display: flex;
}

.w-l-item {
    flex-grow: 1;
    margin: 5px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.item-wrap {
    color: #fff;
    font-size: 50px;
}

.default-color {
    background-color: #2db4f8;
}

.clicked-color {
    background-color: #2771D4;
}

six-in-nine-vue.js

new Vue({
    el: "#js-wrap",
    data: {
        num_list: [
            ["點(diǎn)我", "點(diǎn)我", "點(diǎn)我"],
            ["點(diǎn)我", "點(diǎn)我", "點(diǎn)我"],
            ["點(diǎn)我", "點(diǎn)我", "點(diǎn)我"]
        ],
        clicked_list:[false,false,false,false,false,false,false,false,false]
    },
    methods: {
        clickBtn: function (idx) {
            this.clicked_list[idx] = !this.clicked_list[idx];
        }
    }
});

這里不能用數(shù)組的動(dòng)態(tài)綁定苦蒿,個(gè)人理解:數(shù)組 clicked_list[line_idx * 3 + item_idx] 這個(gè)實(shí)際上是一個(gè)指針,當(dāng)我們改變 data 中該數(shù)組的值時(shí)渗稍,指針指向并沒(méi)有改變佩迟,所以組件沒(méi)有更新組件狀態(tài)。有著這個(gè)思路竿屹,我將該數(shù)據(jù)改成了對(duì)象报强,這次成功了:

css修改.png

這里的完整 js 代碼:
six-in-nine-vue.js

 new Vue({
    el: "#js-wrap",
    data: {
        num_list: [
            ["點(diǎn)我", "點(diǎn)我", "點(diǎn)我"],
            ["點(diǎn)我", "點(diǎn)我", "點(diǎn)我"],
            ["點(diǎn)我", "點(diǎn)我", "點(diǎn)我"]
        ],
        clicked_list: {
            0: false,
            1: false,
            2: false,
            3: false,
            4: false,
            5: false,
            6: false,
            7: false,
            8: false
        }
    },
    methods: {
        clickBtn: function (idx) {
            this.clicked_list[idx] = !this.clicked_list[idx];
        }
    }
});

這里是該 demo 的改進(jìn)(可以不看):
改進(jìn)點(diǎn):

  1. 原 demo 可復(fù)用性差,用了一個(gè)二維數(shù)組存儲(chǔ)數(shù)據(jù)拱燃,不符合實(shí)際情況(后端應(yīng)該通常只給一個(gè)一維數(shù)組);
  2. 原 demo 為了使用 flex 布局秉溉,將頁(yè)面進(jìn)行了雙重嵌套,結(jié)構(gòu)復(fù)雜;而且如果后端返回小于九個(gè)的元素召嘶,則布局改變父晶;
    增加功能限制:限制最大點(diǎn)擊變色數(shù)為6個(gè)
    因此加以改進(jìn):
    six-in-nine-vue-batter.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>six-in-nine-vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <link rel="stylesheet" href="six-in-nine-vue-better.css">
</head>
<body>
<div class="wrap" id="js-wrap">
    <div class="w-item"
         :class="[isClicked(item_idx) ? 'clicked-color' : 'default-color']"
         v-for="(item, item_idx) in num_list"
        @click="clickItem(item_idx)">
        <div class="item-center">
            {{item}}
        </div>
    </div>
</div>
</body>
</html>
<script src="six-in-nine-vue-batter.js"></script>

six-in-nine-vue-batter.css

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

.wrap {
    box-sizing: border-box;
    height: 100%;
}
.w-item{
    margin-top: 10px;
    margin-left: 10px;
    width: calc((100% - (10px * 4)) / 3);
    height: calc((100% - (10px * 4)) / 3);
    float: left;
    background-color: #3F89EC;

    display: flex;
    justify-content: center;
    align-items: center;
}
.item-center{
    font-size: 50px;
    color: #fff;
}
.default-color{
    background-color: #3F89EC;
}
.clicked-color{
    background-color: #2771D4;
}

six-in-nine-vue-batter.js

new Vue({
    el: "#js-wrap",
    data: {
        num_list: [0, 1, 2, 3, 4, 5, 6, 7],
        clicked_list: [],
        max_clicked: 6
    },

    methods: {
        clickItem: function (idx) {
            var c_clicked_list = this.clicked_list;
            //如果點(diǎn)擊塊數(shù)大于或等于最大點(diǎn)擊塊數(shù) && 點(diǎn)擊的色塊未變色: 直接返回
            if (c_clicked_list.length >= this.max_clicked && (c_clicked_list.indexOf(idx) == -1)){
                return
            }
            var listIdx = c_clicked_list.indexOf(idx);
            if (listIdx > -1) {
                this.clicked_list.splice(listIdx, 1);
            } else {
                this.clicked_list.push(idx);
            }
        },
        isClicked: function (idx) {
            return this.clicked_list.indexOf(idx) + 1;
        }
    }
});

效果圖:


最終效果.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市弄跌,隨后出現(xiàn)的幾起案子甲喝,更是在濱河造成了極大的恐慌,老刑警劉巖铛只,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件埠胖,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡淳玩,警方通過(guò)查閱死者的電腦和手機(jī)直撤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)蜕着,“玉大人谋竖,你說(shuō)我怎么就攤上這事∥甓” “怎么了圈盔?”我有些...
    開封第一講書人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)悄雅。 經(jīng)常有香客問(wèn)我驱敲,道長(zhǎng),這世上最難降的妖魔是什么宽闲? 我笑而不...
    開封第一講書人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任众眨,我火速辦了婚禮,結(jié)果婚禮上容诬,老公的妹妹穿的比我還像新娘娩梨。我一直安慰自己,他們只是感情好览徒,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開白布狈定。 她就那樣靜靜地躺著,像睡著了一般习蓬。 火紅的嫁衣襯著肌膚如雪纽什。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評(píng)論 1 312
  • 那天躲叼,我揣著相機(jī)與錄音芦缰,去河邊找鬼。 笑死枫慷,一個(gè)胖子當(dāng)著我的面吹牛让蕾,可吹牛的內(nèi)容都是我干的浪规。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼探孝,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼笋婿!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起再姑,我...
    開封第一講書人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤萌抵,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后元镀,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡霎桅,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年栖疑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片滔驶。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡遇革,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出揭糕,到底是詐尸還是另有隱情萝快,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布著角,位于F島的核電站揪漩,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏吏口。R本人自食惡果不足惜奄容,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望产徊。 院中可真熱鬧昂勒,春花似錦、人聲如沸舟铜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)谆刨。三九已至塘娶,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間痴荐,已是汗流浹背血柳。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留生兆,地道東北人难捌。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓膝宁,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親根吁。 傳聞我的和親對(duì)象是個(gè)殘疾皇子员淫,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容击敌。關(guān)于...
    云之外閱讀 5,052評(píng)論 0 29
  • 蕎粑 這是一個(gè)多么光鮮亮麗的標(biāo)題介返,正如我所看到...
    陳育罕說(shuō)他只想抽煙閱讀 1,594評(píng)論 23 62
  • 一年一年又一年圣蝎,飛逝盡在一轉(zhuǎn)眼。 唯一永遠(yuǎn)不改變是不停的改變衡瓶。 一年又一年徘公,今年23。經(jīng)常迷茫著哮针,隨著年紀(jì)的增長(zhǎng)关面,...
    番茄西施閱讀 1,915評(píng)論 0 0
  • 晚上九點(diǎn)十二,手機(jī)振個(gè)不停十厢。我煩躁不安等太。 手機(jī)通知告訴我:“我有2個(gè)QQ好友給我發(fā)了N條信息事格「瓤粒”他,在給我發(fā)窗口抖...
    縵華纓閱讀 248評(píng)論 0 1
  • 在爬蟲抓取網(wǎng)頁(yè)數(shù)據(jù)的時(shí)候哗讥,會(huì)直接利用http模塊來(lái)模擬瀏覽器訪問(wèn)URL筛武。在Python3中對(duì)Http模塊被封裝到h...
    灰太狼_black閱讀 4,494評(píng)論 0 2