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

阅读本书更多章节>>>>

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

文章目录

前端Vue日常工作中--动态css类1.普通应用1.1动态 CSS 类1.2动态内联样式 2.组件中应用(父子组件)2.1动态绑定CSS类名在父组件中：在子组件中： 2.2动态绑定内联样式在父组件中：在子组件中：

1.普通应用

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

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

1.1动态 CSS 类

<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>

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

1.2动态内联样式

<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 的值，从而动态改变样式。

2.组件中应用(父子组件)

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

2.1动态绑定CSS类名

在父组件中：

<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>

在子组件中：

<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动态绑定内联样式

在父组件中：

<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>

在子组件中：

<template>  <div :style="{ backgroundColor: highlightColor }">    <!-- 子组件的内容 -->  </div></template><script>export default {  props: {    highlightColor: String,  },};</script>

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

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-12/157643.html，文章来源：网络cs，作者：利杜鹃，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！