**
新學習新征程，我們一起踏上學習 vue.js的新長征
遇見 vue.js --------阿文的vue.js學習筆記（1）-----初識vue.js
遇見 vue.js --------阿文的vue.js學習筆記（2—1）----- 基本使用 [1]
遇見 vue.js --------阿文的vue.js學習筆記（2—2）----- 基本使用 [2]
… … …
遇見 vue.js --------阿文的vue.js學習筆記(目錄)
關注我，我們一起學習進步，
**
系結 HTML Class
首先要系結 Class 肯定要用到 v-bind:class ，
1、物件語法：
含義： 通過傳給 v-bind:class 一個物件，以動態地切換 class
(1)你可以通過傳入資料屬性的方式將其系結 v-bind:class:" "
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
<style>
//這里是class屬性
.b{
color: skyblue;
width: 100px;
height: 100px;
border: 2px solid red;
}
</style>
</head>
<body>
<div id="a">
//通過在data內宣告屬性，然后在這里系結
<div v-bind:class="cls">123</div>
</div>
<script>
new Vue({
el:"#a",
data:{
cls:"b"
}
})
</script>
</body>
</html>
當然你也可以使用 v-bind:class:"{ }"
通過在下面宣告 isb 這樣的屬性 （屬性值為布林值 true 或 false）來判定我們的 class屬性是否應該存在
當我們 需要系結的 class 屬性 多了之后我們也可以在 data 里面直接宣告一個 資料組：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
<style>
.a{
color: skyblue;
border: 2px solid red;
}
.b{
width: 100px;
height: 100px;
}
.c{
background-color: aqua;
}
</style>
</head>
<body>
<div id="a">
<div v-bind:class="classobject">123</div>
</div>
<script>
new Vue({
el:"#a",
data:{
classobject:{
a:true,
b:true,
c:true
}
}
})
</script>
</body>
</html>
即我們的 classobject 屬性 直接將其系結進去即可，
當然也可以將其改為我們的計算屬性，效果也是一樣，
computed:{
classobject:function(){
return{
a:true,
b:true,
c:true
}
}
}
2、陣列語法
含義： 通過傳給 v-bind:class 一個陣列，以應用一個 class 串列，
語法： v-bind:class="[ ]"
舉個例子：由于同樣是上面那個例子 的寫法不同，下面我就只截圖關鍵部分，其他部分的代碼請看上面，
很顯然這樣也是完全可以的
當然如果你想加入條件isAcitive 來切換我們的class ，可以用三元語法{ isActive? cls : " "},但是這樣的話，一旦陣列中 資料變多 ，那么三元語法 將會變得十分繁瑣，
所以我們還是會在陣列內部采用物件的寫法：
你可以發現這樣也是可以的，但是引號內就要寫它原本的東西，就不能在寫 cls3 了
3、用在組件上
前面有寫過組件的筆記，復習請看 遇見 vue.js --------阿文的vue.js學習筆記（2—2）----- 基本使用 [2]
下面我們先來寫個組件然后將其渲染進我們的 html 界面
補充寫組件時 ，如果用的引號 那么是不能換行的 ，但是在ES6的語法中我們可以用 強調符（就是我們字母鍵盤上 數字1鍵左邊的那個鍵） 來，中間的內容就可以換行不影響我們的執行結果，
這個時候我們需要進行系結點擊事件：就直接系結即可用我們前面的語法是完全可以的
下面我們來說一說在組件上系結class，這些 class 將會被添加到該組件的根元素上面，這個元素上已經存在的 class 不會被覆寫，
根元素就是那個最外面的大盒子
舉個例子：可以看出我們添加的class屬性是添加到的 我們最外面的 那個大盒子 div 上的
4、系結行內樣式
我們的行內樣式就是直接將需要渲染的樣式直接添加進我們的 盒子里去
簡單回顧：行內樣式 就是這樣直接添加進去
下面我們來進行系結行內樣式，行內樣式的系結 同樣也分為上面的 物件語法、陣列語法等
下面我們都用上面的 例子來舉例：
當然系結到一個樣式物件也是完全可以的
當然 也可以寫在計算屬性里面，
行內樣式 陣列語法就是 可以將多個樣式物件 都同時應用上去：像下面這樣 有多個樣式物件的時候，就可以用陣列語法來同時渲染
最后補充一個東西，當 我們
v-bind:style使用需要添加瀏覽器引擎前綴的 CSS 屬性 時，如 transform，Vue.js 會自動偵測并添加相應的前綴（因為在不同的瀏覽器中需要的前綴不一樣，但是vue會自動檢測，就不需要我們去寫前綴），
**
關注 校園君有話說 公眾號 ，回復 web前端 免費領取50G 前端學習資料 一份 ，我們一起學習進步吧，
**
“生活需要煙火 也需要靜靜的美好 不用刻意的去迎合 有趣的人會相互迎合”
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/141920.html
標籤：其他