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

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

文章目录

1.普通应用

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

假设你有一个 Vue 组件，其中有一个数据属性

isStyled

，你想根据这个属性动态地改变元素的样式。

1.1动态 CSS 类

<template><div:class="{ 'styled': isStyled }"><p>这是一个动态样式的例子</p></div><button@click="toggleStyle">切换样式</button></template><script>exportdefault{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>exportdefault{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';exportdefault{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>exportdefault{props:{isStyled: Boolean,},};</script><stylescoped>.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';exportdefault{components:{
    ChildComponent,},data(){return{highlightColor:'yellow',// 或者根据其他条件来动态改变};},};</script>

在子组件中：

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

父组件使用

:style

绑定动态的内联样式，根据

highlightColor

的值来设置背景颜色。子组件同样使用

:style

绑定动态的内联样式，根据

highlightColor

的值来设置背景颜色。