系统学习Vue中使用CSS的各种方式

Vue 中使用 CSS 非常灵活，可通过 class 和 style 给元素动态绑定 CSS，今天内容详细介绍使用规则：

成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站制作、做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的鄯善网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

在未使用 Vue 框架时，可以通过 class 和 style 来给 HTML 元素添加 css，如果想动态修改 css 可直接操作 DOM 元素的属性。在前端小课 第6天：使用CSS的三种方式 中我们讲了 css 的引入方式。

如果想动态修改 css 样式，多多少少有一些不便，vue 解决了这个问题。

一、class

在 Vue 模板中可以直接添加 class 属性，而且支持多种方式，比如对象、数组、JS表达式，这些说白了就是为了能够更灵活修改 class。

如果 css 在代码中不会涉及到修改，直接使用静态的 class 就行：

 
 
 
    
  
  
  
  1. 《前端小课》
 

如果，某些 css 会根据不同的业务发生变化，这时就需要进行动态绑定 class，vue 中提供了多种方法：

1. 模板中写对象

这种语法规则类似在 js 中定义一个对象，如果 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 的值，样式便可以动态修改。

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

2. js 中写对象

你可以把动态 class 的逻辑直接写到 JS 代码中，这种写法可以减轻模板中定义太多的业务逻辑。

 
 
 
    
  
  
  
  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. 使用数组

以上两种方式可以通过数组设置多个 class，语法和 js 中的数组定义一致。

 
 
 
    
  
  
  
  1. 本文来自公众号素燕
  
 
 
 
    
  
  
  
  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. 使用三元表达式

 
 
 
    
  
  
  
  1. 本文来自公众号素燕
  
 
 
 
    
  
  
  
  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 也可以通过 style 给 HTML 元素设置属性。用法和 class 用法一致。如果希望通过 style 的方式给 HTML 元素设置 css，可以通过 :style 来动态给 HTML 动态绑定 css。

1. 在模板中使用对象

模板中定的对象，给元素设置了字体颜色和字体大小，通过属性值 activeColor 和 fontSize 动态修改元素的字体颜色和大小。

 
 
 
    
  
  
  
  1.  
    2. 
 
 
 
 
 
 
    
  
  
  
  1. data() { 
    2. 
  
  
  
  2.   return { 
    3. 
  
  
  
  3.     activeColor: 'blue', 
    4. 
  
  
  
  4.     fontSize: 20 
    5. 
  
  
  
  5.   } 
    6. 
  
  
  
  6. } 
    7.

2. 在 js 中定义对象

把设置样式的对象直接定义到 js 中而非模板中。

 
 
 
    
  
  
  
  1.  
    2. 
 
 
 
 
 
 
    
  
  
  
  1. data() { 
    2. 
  
  
  
  2.   return { 
    3. 
  
  
  
  3.     contentStyle: { 
    4. 
  
  
  
  4.         color: 'blue', 
    5. 
  
  
  
  5.         fontSize: 20 
    6. 
  
  
  
  6.     } 
    7. 
  
  
  
  7.   } 
    8. 
  
  
  
  8. } 
    9.

3. 使用数组

把设置样式的对象直接定义到 js 中而非模板中。

 
 
 
    
  
  
  
  1.  
    2. 
 
 
 
 
 
 
    
  
  
  
  1. data() { 
    2. 
  
  
  
  2.   return { 
    3. 
  
  
  
  3.       fs: 20, 
    4. 
  
  
  
  4.       contentStyle: { 
    5. 
  
  
  
  5.         color: 'blue' 
    6. 
  
  
  
  6.       } 
    7. 
  
  
  
  7.   } 
    8. 
  
  
  
  8. } 
    9.

今天的内容比较简单，基本都是语法规则，大家加油!

网页名称：系统学习Vue中使用CSS的各种方式
分享地址：http://www.csdahua.cn/qtweb/news13/552813.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网

成都快上网为您推荐相关内容

手机网站建设知识

同城分类信息

成都能净科技　　 　内江托管服务器　　 　成都SEO优化　　 　成都翻译公司　　 　快照排名　　 　买友情链接　　 　做网站公司　　 　成都网站优化　　 　瑞杰企业管理　　 　抖音短视频拍摄　　 　西部信息机房　　 　重庆网站制作　　 　成都响应式网站　　 　小谭建站　　 　成都营销网站建设　　 　成都门户网站建设设计方案　　 　全网整合营销　　 　沃尔沃电机组维修保养　　 　网站推广优化　　 　营山产后修复