前端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 类

              
            
                
            这是一个动态样式的例子
              
              切换样式
            
            
            export default {
              data() {
                return {
                  isStyled: false,
                };
              },
              methods: {
                toggleStyle() {
                  this.isStyled = !this.isStyled;
                },
              },
            };
            
            
            .styled {
              color: red;
              font-weight: bold;
            }
            
            

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

            1.2动态内联样式

              
            
                
            这是另一个动态样式的例子
              
              切换样式
            
            
            export default {
              data() {
                return {
                  isStyled: false,
                };
              },
              methods: {
                toggleStyle() {
                  this.isStyled = !this.isStyled;
                },
              },
            };
            
            

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

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

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

            2.1动态绑定CSS类名

            在父组件中：

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

            在子组件中：

              
            
                
              
            
            
            export default {
              props: {
                isStyled: Boolean,
              },
            };
            
            
            .child-style {
              color: red;
              font-weight: bold;
            }
            
            

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

            2.2动态绑定内联样式

            在父组件中：

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

            在子组件中：

              
            
                
              
            
            
            export default {
              props: {
                highlightColor: String,
              },
            };
            
            

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