当前位置：尊龙游戏旗舰厅官网 > 前端技术 > vue >内容正文

vue

class根据状态 vue-尊龙游戏旗舰厅官网

发布时间：2024/10/8 vue 0 豆豆

尊龙游戏旗舰厅官网收集整理的这篇文章主要介绍了 class根据状态 vue_系统学习 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 就行：

《前端小课》div>

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

1、模板中写对象

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

{{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 代码中，这种写法可以减轻模板中定义太多的业务逻辑。

{{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>
.content {
    color: #000;
    font-size: 17px;
    margin: 10px;
}
.stress {
    color: red;
}
data() {
    return {
        isstress: true,
        contentobj: {
            content: true
        }
    }
}

4、使用三元表达式

本文来自公众号素燕div>
.stress {
    color: red;
}
data() {
    return {
        isstress: true
    }
}

style

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

1、在模板中使用对象

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

div>
data() {
  return {
    activecolor: 'blue',
    fontsize: 20
  }
}

2、在 js 中定义对象

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

div>
data() {
  return {
    contentstyle: {
        color: 'blue',
        fontsize: 20
    }
  }
}

3、使用数组

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

div>
data() {
  return {
      fs: 20,
      contentstyle: {
        color: 'blue'
      }
  }
}今天的内容比较简单，基本都是语法规则，大家加油！

长按关注

素燕《前端小课》

帮助 10w 人入门并进阶前端

尊龙游戏旗舰厅官网：https://lefex.gitee.io/

总结

以上是尊龙游戏旗舰厅官网为你收集整理的class根据状态 vue_系统学习 vue 中使用 css 的各种方式的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得尊龙游戏旗舰厅官网网站内容还不错，欢迎将尊龙游戏旗舰厅官网推荐给好友。