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

时间：2023-03-20 23:30:10 科技观察

Vue中CSS的使用非常灵活，CSS可以通过class和style动态绑定到元素上。今天的内容详细介绍了使用规则：当不使用Vue框架时，可以使用class和style样式给HTML元素添加css，如果想动态修改css，直接操作DOM的属性即可元素。在前端课Day6:CSS的三种使用方式中，我们讲到了css的介绍。如果要动态修改css样式，或多或少不方便，vue解决了这个问题。1、Class可以直接在Vue模板中添加类属性，支持对象、数组、JS表达式等多种方法。这些说白了就是为了能够更灵活的修改类。如果css在代码中不涉及修改，直接使用静态类即可：《前端小课》

如果有些css会根据不同的业务发生变化，那就需要修改动态绑定类，Vue提供了多种方法：1.在模板中写对象的语法规则类似于在js中定义对象。如果isDark为真，它将把深色文本绑定到h1元素，否则它将绑定浅色文本。{{title}}需要定义cssdark-text和light-text，只有这样才能将样式渲染到HTML元素中。.dark-text{color:#fff;}.light-text{color:#000;}在js中定义了属性isDark，这样可以修改isDark的值，动态修改样式。data(){return{isDark:false,title:'前端课'}}2.在js中写对象的时候，可以直接把动态类的逻辑写到JS代码中，这样可以减少对太模板业务逻辑中的许多定义。{{title}}.dark-text{color:#fff;}.light-text{color:#000;}data(){return{colorMode:{dark:false},textMode:{'dark-text':false,'light-text':true},title:'FrontendLesson'},methods:{changeMode(){constisDark=this.colorMode.dark;this.textMode['dark-text']=isDark;this.textMode['light-text']=!isDark;}}},3.使用数组以上两种方法可以通过数组设置多个类，语法就可以了和js中的数组定义是一致的。本文来自公众号素颜

.content{color:#000;font-size:17px;margin:10px;}.stress{color:red;}data(){return{isStress:true,contentObj:{content:true}}}4.使用三元表达式本文来自公众号素颜

.stress{color:red;}data(){return{isStress:true}}其次，stylevue还可以通过style为HTML元素设置属性。用法与类用法一致。如果你想通过样式为HTML元素设置css，你可以使用:style将css动态绑定到HTML。1、在模板中使用对象模板指定的对象为元素设置字体颜色和字体大小，通过属性值activeColor和fontSize动态修改元素的字体颜色和大小。