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

时间:2022-05-10 06:36:21

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

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

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

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

一、class

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

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

<div class="title">《前端小课》</div> 

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

1. 模板中写对象

这种语法规则类似在 js 中定义一个对象,如果 isDark 为真,将给 h1 元素绑定 dark-text,否则绑定 light-text。

<h1 class="title" :class="{'dark-text': isDark, 'light-text': !isDark}">{{title}}</h1> 

需要定义 css dark-text 和 light-text,只有这样才能够把样式渲染到 HTML 元素上。

.dark-text { 

    color: #fff; 

.light-text { 

    color: #000; 

在 js 中定义属性 isDark,这样可以修改 isDark 的值,样式便可以动态修改。

data() { 

    return { 

        isDark: false, 

        title: '前端小课' 

    } 

2. js 中写对象

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

<h1 class="title" :class="textMode">{{title}}</h1> 

.dark-text { 

    color: #fff; 

.light-text { 

    color: #000; 

data() { 

    return { 

        colorMode: { 

            dark: false 

        }, 

        textMode: { 

            'dark-text': false, 

            'light-text': true 

        }, 

        title: '前端小课' 

    }, 

    methods: { 

        changeMode() { 

            const isDark = this.colorMode.dark; 

            this.textMode['dark-text'] = isDark; 

            this.textMode['light-text'] = !isDark; 

        } 

    } 

}, 

3. 使用数组

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

<div :class="[contentObj, {stress: isStress}]">本文来自公众号素燕</div> 

.content { 

    color: #000; 

    font-size: 17px; 

    margin: 10px; 

.stress { 

    color: red; 

data() { 

    return { 

        isStress: true, 

        contentObj: { 

            content: true 

        } 

    } 

4. 使用三元表达式

<div :class="[isStress ? stress : '']">本文来自公众号素燕</div> 

.stress { 

    color: red; 

data() { 

    return { 

        isStress: true 

    } 

二、style

vue 也可以通过 style 给 HTML 元素设置属性。用法和 class 用法一致。如果希望通过 style 的方式给 HTML 元素设置 css,可以通过 :style 来动态给 HTML 动态绑定 css。

1. 在模板中使用对象

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

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> 

data() { 

  return { 

    activeColor: 'blue', 

    fontSize: 20 

  } 

2. 在 js 中定义对象

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

<div :style="contentStyle"></div> 

data() { 

  return { 

    contentStyle: { 

        color: 'blue', 

        fontSize: 20 

    } 

  } 

3. 使用数组

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

<div :style="[contentStyle, {fontSize: fs + 'px'}]"></div> 

data() { 

  return { 

      fs: 20, 

      contentStyle: { 

        color: 'blue' 

      } 

  } 

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

原文地址:https://mp.weixin.qq.com/s?__biz=MzI5MTY0ODAwNQ==&mid=2247487814&idx=1&sn=85d4677013ed34cec8fde4867c10f76a&chksm=ec0c362cdb7bbf3a6c8a8cdc64f571571d12d3c295ea98eb9f98628b19bbfb5c3e02da80ac73&mpshare=1&s