前端Vue日常工作中--动态css类

前端Vue日常工作中--动态css类

普通应用

Vue.js 允许你在动态地设置 CSS 类、样式等方面非常灵活。

假设你有一个 Vue 组件,其中有一个数据属性 isStyled,你想根据这个属性动态地改变元素的样式。

1.1动态 CSS 类

xml 复制代码
<template>
  <div :class="{ 'styled': isStyled }">
    <p>这是一个动态样式的例子</p>
  </div>
  <button @click="toggleStyle">切换样式</button>
</template>

<script>
export default {
  data() {
    return {
      isStyled: false,
    };
  },
  methods: {
    toggleStyle() {
      this.isStyled = !this.isStyled;
    },
  },
};
</script>

<style>
.styled {
  color: red;
  font-weight: bold;
}
</style>

isStyledtrue 时,.styled 类将被应用,从而改变文字的颜色和粗细。点击按钮会调用 toggleStyle 方法,切换 isStyled 的值,从而动态改变样式。

1.2动态内联样式

xml 复制代码
<template>
  <div :style="{ color: isStyled ? 'red' : 'black', fontWeight: isStyled ? 'bold' : 'normal' }">
    <p>这是另一个动态样式的例子</p>
  </div>
  <button @click="toggleStyle">切换样式</button>
</template>

<script>
export default {
  data() {
    return {
      isStyled: false,
    };
  },
  methods: {
    toggleStyle() {
      this.isStyled = !this.isStyled;
    },
  },
};
</script>

使用了三元运算符 isStyled ? 'red' : 'black'isStyled ? 'bold' : 'normal',根据 isStyled 的值动态地设置文字的颜色和粗细。点击按钮会调用 toggleStyle 方法,切换 isStyled 的值,从而动态改变样式。

组件中应用(父子组件)

在Vue.js中,你可以通过动态地绑定CSS类名或内联样式来实现动态CSS。这可以在父子组件之间进行通信,使得子组件可以根据父组件的状态或属性来更新自身的样式。

2.1动态绑定CSS类名

在父组件中:

html 复制代码
<template>
  <div :class="{ 'father-style': isStyled }">
    <child-component :isStyled="isStyled"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      isStyled: true, // 或者根据其他条件来动态改变
    };
  },
};
</script>
<style>
.father-style {
  color: red;
  font-weight: bold;
}
</style>

在子组件中:

html 复制代码
<template>
  <div :class="{ 'child-style': isStyled }">
    <!-- 子组件的内容 -->
  </div>
</template>

<script>
export default {
  props: {
    isStyled: Boolean,
  },
};
</script>

<style scoped>
.child-style {
  color: red;
  font-weight: bold;
}
</style>

父组件使用:class绑定动态的CSS类名,根据 isStyled 的值决定是否添加 father-style 类名。子组件同样使用:class绑定动态的CSS类名,根据 isStyled 的值决定是否添加 child-style 类名。

2.2动态绑定内联样式

在父组件中:

html 复制代码
<template>
  <div :style="{ backgroundColor: highlightColor }">
    <child-component :highlightColor="highlightColor"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      highlightColor: 'yellow', // 或者根据其他条件来动态改变
    };
  },
};
</script>

在子组件中:

html 复制代码
<template>
  <div :style="{ backgroundColor: highlightColor }">
    <!-- 子组件的内容 -->
  </div>
</template>

<script>
export default {
  props: {
    highlightColor: String,
  },
};
</script>

父组件使用:style绑定动态的内联样式,根据 highlightColor 的值来设置背景颜色。子组件同样使用:style绑定动态的内联样式,根据 highlightColor 的值来设置背景颜色。

相关推荐
CodeSheep8 分钟前
大家有没有发现一个奇特现象:你能在一个公司工作 12 年以上,无论你多忠诚多卖力,一旦公司赚的少了,那你就成了“眼中钉肉中刺”
前端·后端·程序员
亿元程序员12 分钟前
你知道三国志战略版的地图是怎么实现的吗?
前端
Rewloc20 分钟前
IntelliJ IDEA 打包 Web 项目 WAR 包(含 Tomcat 部署+常见问题解决)
前端·tomcat·intellij-idea
devii6622 分钟前
120html
前端
.生产的驴23 分钟前
React useEffect组件渲染执行操作 组件生命周期 监视器 副作用
前端·css·react.js·ajax·前端框架·jquery·html5
峥无30 分钟前
HTML 零基础入门到实战:从骨架到页面的完整指南
前端·html
南囝coding36 分钟前
《独立开发者精选工具》
前端·后端·开源
IT_陈寒40 分钟前
JavaScript 性能优化的 7 个致命陷阱:我从 P5 到 P8 的核心突破都在这里!
前端·人工智能·后端
艾小码1 小时前
告别加班!这些数组操作技巧让前端开发效率翻倍
前端·javascript
Rhys..2 小时前
ES6是什么
前端·javascript·es6