日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
系統(tǒng)學(xué)習(xí)Vue中使用CSS的各種方式

Vue 中使用 CSS 非常靈活，可通過(guò) class 和 style 給元素動(dòng)態(tài)綁定 CSS，今天內(nèi)容詳細(xì)介紹使用規(guī)則：

成都創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的鄯善網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

在未使用 Vue 框架時(shí)，可以通過(guò) class 和 style 來(lái)給 HTML 元素添加 css，如果想動(dòng)態(tài)修改 css 可直接操作 DOM 元素的屬性。在前端小課 第6天：使用CSS的三種方式 中我們講了 css 的引入方式。

如果想動(dòng)態(tài)修改 css 樣式，多多少少有一些不便，vue 解決了這個(gè)問(wèn)題。

一、class

在 Vue 模板中可以直接添加 class 屬性，而且支持多種方式，比如對(duì)象、數(shù)組、JS表達(dá)式，這些說(shuō)白了就是為了能夠更靈活修改 class。

如果 css 在代碼中不會(huì)涉及到修改，直接使用靜態(tài)的 class 就行：

 
 
 
    
  
  
  
  1. 《前端小課》
 

如果，某些 css 會(huì)根據(jù)不同的業(yè)務(wù)發(fā)生變化，這時(shí)就需要進(jìn)行動(dòng)態(tài)綁定 class，vue 中提供了多種方法：

1. 模板中寫(xiě)對(duì)象

這種語(yǔ)法規(guī)則類似在 js 中定義一個(gè)對(duì)象，如果 isDark 為真，將給 h1 元素綁定 dark-text，否則綁定 light-text。

 
 
 
    
  
  
  
  1. {{title}} 
    2.

需要定義 css dark-text 和 light-text，只有這樣才能夠把樣式渲染到 HTML 元素上。

 
 
 
    
  
  
  
  1. .dark-text { 
    2. 
  
  
  
  2.     color: #fff; 
    3. 
  
  
  
  3. } 
    4. 
  
  
  
  4. .light-text { 
    5. 
  
  
  
  5.     color: #000; 
    6. 
  
  
  
  6. } 
    7.

在 js 中定義屬性 isDark，這樣可以修改 isDark 的值，樣式便可以動(dòng)態(tài)修改。

 
 
 
    
  
  
  
  1. data() { 
    2. 
  
  
  
  2.     return { 
    3. 
  
  
  
  3.         isDark: false, 
    4. 
  
  
  
  4.         title: '前端小課' 
    5. 
  
  
  
  5.     } 
    6. 
  
  
  
  6. } 
    7.

2. js 中寫(xiě)對(duì)象

你可以把動(dòng)態(tài) class 的邏輯直接寫(xiě)到 JS 代碼中，這種寫(xiě)法可以減輕模板中定義太多的業(yè)務(wù)邏輯。

 
 
 
    
  
  
  
  1. {{title}} 
    2. 
 
 
 
 
 
 
    
  
  
  
  1. .dark-text { 
    2. 
  
  
  
  2.     color: #fff; 
    3. 
  
  
  
  3. } 
    4. 
  
  
  
  4. .light-text { 
    5. 
  
  
  
  5.     color: #000; 
    6. 
  
  
  
  6. } 
    7. 
 
 
 
 
 
 
    
  
  
  
  1. data() { 
    2. 
  
  
  
  2.     return { 
    3. 
  
  
  
  3.         colorMode: { 
    4. 
  
  
  
  4.             dark: false 
    5. 
  
  
  
  5.         }, 
    6. 
  
  
  
  6.         textMode: { 
    7. 
  
  
  
  7.             'dark-text': false, 
    8. 
  
  
  
  8.             'light-text': true 
    9. 
  
  
  
  9.         }, 
    10. 
  
  
  
  10.         title: '前端小課' 
    11. 
  
  
  
  11.     }, 
    12. 
  
  
  
  12.     methods: { 
    13. 
  
  
  
  13.         changeMode() { 
    14. 
  
  
  
  14.             const isDark = this.colorMode.dark; 
    15. 
  
  
  
  15.             this.textMode['dark-text'] = isDark; 
    16. 
  
  
  
  16.             this.textMode['light-text'] = !isDark; 
    17. 
  
  
  
  17.         } 
    18. 
  
  
  
  18.     } 
    19. 
  
  
  
  19. }, 
    20.

3. 使用數(shù)組

以上兩種方式可以通過(guò)數(shù)組設(shè)置多個(gè) class，語(yǔ)法和 js 中的數(shù)組定義一致。

 
 
 
    
  
  
  
  1. 本文來(lái)自公眾號(hào)素燕
  
 
 
 
    
  
  
  
  1. .content { 
    2. 
  
  
  
  2.     color: #000; 
    3. 
  
  
  
  3.     font-size: 17px; 
    4. 
  
  
  
  4.     margin: 10px; 
    5. 
  
  
  
  5. } 
    6. 
  
  
  
  6. .stress { 
    7. 
  
  
  
  7.     color: red; 
    8. 
  
  
  
  8. } 
    9. 
 
 
 
 
 
 
    
  
  
  
  1. data() { 
    2. 
  
  
  
  2.     return { 
    3. 
  
  
  
  3.         isStress: true, 
    4. 
  
  
  
  4.         contentObj: { 
    5. 
  
  
  
  5.             content: true 
    6. 
  
  
  
  6.         } 
    7. 
  
  
  
  7.     } 
    8. 
  
  
  
  8. } 
    9.

4. 使用三元表達(dá)式

 
 
 
    
  
  
  
  1. 本文來(lái)自公眾號(hào)素燕
  
 
 
 
    
  
  
  
  1. .stress { 
    2. 
  
  
  
  2.     color: red; 
    3. 
  
  
  
  3. } 
    4. 
 
 
 
 
 
 
    
  
  
  
  1. data() { 
    2. 
  
  
  
  2.     return { 
    3. 
  
  
  
  3.         isStress: true 
    4. 
  
  
  
  4.     } 
    5. 
  
  
  
  5. } 
    6.

二、style

vue 也可以通過(guò) style 給 HTML 元素設(shè)置屬性。用法和 class 用法一致。如果希望通過(guò) style 的方式給 HTML 元素設(shè)置 css，可以通過(guò) :style 來(lái)動(dòng)態(tài)給 HTML 動(dòng)態(tài)綁定 css。

1. 在模板中使用對(duì)象

模板中定的對(duì)象，給元素設(shè)置了字體顏色和字體大小，通過(guò)屬性值 activeColor 和 fontSize 動(dòng)態(tài)修改元素的字體顏色和大小。
  
 
 
 
    
  
  
  
  1. data() { 
    2. 
  
  
  
  2.   return { 
    3. 
  
  
  
  3.     activeColor: 'blue', 
    4. 
  
  
  
  4.     fontSize: 20 
    5. 
  
  
  
  5.   } 
    6. 
  
  
  
  6. } 
    7.

2. 在 js 中定義對(duì)象

把設(shè)置樣式的對(duì)象直接定義到 js 中而非模板中。
  
 
 
 
    
  
  
  
  1. data() { 
    2. 
  
  
  
  2.   return { 
    3. 
  
  
  
  3.     contentStyle: { 
    4. 
  
  
  
  4.         color: 'blue', 
    5. 
  
  
  
  5.         fontSize: 20 
    6. 
  
  
  
  6.     } 
    7. 
  
  
  
  7.   } 
    8. 
  
  
  
  8. } 
    9.

3. 使用數(shù)組

把設(shè)置樣式的對(duì)象直接定義到 js 中而非模板中。
  
 
 
 
    
  
  
  
  1. data() { 
    2. 
  
  
  
  2.   return { 
    3. 
  
  
  
  3.       fs: 20, 
    4. 
  
  
  
  4.       contentStyle: { 
    5. 
  
  
  
  5.         color: 'blue' 
    6. 
  
  
  
  6.       } 
    7. 
  
  
  
  7.   } 
    8. 
  
  
  
  8. } 
    9.

今天的內(nèi)容比較簡(jiǎn)單，基本都是語(yǔ)法規(guī)則，大家加油!


標(biāo)題名稱：系統(tǒng)學(xué)習(xí)Vue中使用CSS的各種方式
文章分享：http://www.5511xx.com/article/dhiogpj.html