前端小白入門Vue之Class與Style繫結

2021-10-25 08:16:36 字數 1638 閱讀 7305

二、繫結內聯樣式

總結本週推薦

css是前端中必不可少的一部分，那麼在vue中，我們又如何進行css樣式的動態變化呢？

這一篇我們就來談談如何使用vue來動態的改變樣式



>


"static" v-bind:class=


"">


<


/div>


<


/div>


var vm = new vue(}


)<


/script>


<


/body>
class中的是正常的樣式，v-bind:class中就是我們vue中繫結的樣式。

是乙個物件，istrue決定了樣式active是否保留。

當我們繫結多個樣式時，可以採取：

（當樣式名中存在"-"等特殊符號時需要使用引號括起來，表示為乙個字串）

當然我們也可以把這個物件儲存到vue中的data中：



>


"static" v-bind:class=


"activeobject"


>


<


/div>


<


/div>


var vm = new vue(}


})<


/script>


<


/body>
**如下（示例）：



>


"static" v-bind:class=


"[activeclass]"


>


<


/div>


<


/div>


var vm = new vue(}


)<


/script>


<


/body>


>


"">顏色


<


/div>


<


/div>


var vm = new vue(}


)<


/script>


<


/body>
也可直接繫結到樣式物件當中



>


"activecolor"


>顏色


<


/div>


<


/div>


var vm = new vue(}


})<


/script>


<


/body>


>


"[activecolor]"


>顏色


<


/div>


<


/div>


var vm = new vue(}


})<


/script>


<


/body>
本次我們的class與style繫結，我們學習了class和style中的樣式如何繫結的語法規則。

還有更多玩法，1.用在元件上。2.自動新增字首。3.多重值等，大家可以到官網中去檢視vue之class與style繫結

工具：超強自動摳圖軟體

前端小白入門Vue之計算屬性

三 資料監聽 總結今日推薦 首先了解為什麼要引入計算屬性 舉例 戶籍 div 居住地 div div var vm new vue script 從 中我們可以看到，每次都需要呼叫去計算province city值，非常降低效率，對於這種重複呼叫的計算，我們可以採用vue為我們提供的計算屬性，從而無...

vue小白快速入門

一 vue是什麼 vue 是一套用於構建使用者介面的漸進式框架。壓縮後僅有17kb 二 vue環境搭建 標籤引入，vue會被註冊為乙個全域性變數。但在用 vue 構建大型應用時推薦使用 npm 安裝。這裡推薦一下是用 的cnpm，非常的快 npm install g cnpm registry 然後...

vue小白快速入門

一 vue是什麼 vue 是一套用於構建使用者介面的漸進式框架。壓縮後僅有17kb 二 vue環境搭建 但在用 vue 構建大型應用時推薦使用 npm 安裝。這裡推薦一下是用 的cnpm，非常的快 npm install g cnpm registry 然後進行安裝 全域性安裝 vue cli np...