前端元素css的动态切换

yuanfang0907

于 2019-12-30 21:02:44 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue前端文章标签： css css切换 css的动态切换 vue 前端

本文链接：https://blog.csdn.net/yuanfang0907/article/details/103772891

Vue前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在前端开发中实现元素CSS动态切换的两种常见方法：通过style内联样式单个或少量属性切换，以及使用CSS类名进行多属性同步切换。结合Vue框架，展示了如何在Vue组件中实现这一功能，以实现元素状态的动态变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发前端页面的时候，如何动态的切换元素的css？主要有一下几种方式：

1.style内联单个或者少量属性动态切换

 :style=" markRed==true?'background-color:#F00;':'background-color: #00ff40;' "

Test.vue

<template>
   <div class="home">
      <div :style="markRed==true?'background-color:#F00;':'background-color: #00ff40;'"> </div>
      <button @click="markDivRed">变为红色</button>
   </div>
</template>
<style src="./Test.css"></style>
<script src="./Test.js"></script>

Test.js.

export default {
    data() {
        return {
            markRed:false
        }
    },
    methods: {
        markDivRed(){
            this.markRed = true;
        }
    }
}

2.css类名动态切换(适用于多种属性同时切换的情景，因为css中可以添加多种属性，而vue中代码简洁)

 :class=" markRed==true?'red':'green' "

Test.vue

<template>
   <div class="home">
      <div :class="markRed==true?'red':'green'"></div>
      <button @click="markDivRed">变为红色</button>
   </div>
</template>
<style src="./Test.css"></style>
<script src="./Test.js"></script>

Test.css

.red{
   background-color:#F00;
}

.green{
   background-color: #00ff40;
}

js文件同上

效果如下：

点击前：

点击后：