前端Vue日常工作中--动态css类
狐说狐有理 2024-07-29 09:03:02 阅读 77
前端Vue日常工作中–动态css类
文章目录
前端Vue日常工作中--动态css类1.普通应用1.1动态 CSS 类1.2动态内联样式
2.组件中应用(父子组件)2.1动态绑定CSS类名在父组件中：在子组件中：
2.2动态绑定内联样式在父组件中：在子组件中：
1.普通应用
Vue.js 允许你在动态地设置 CSS 类、样式等方面非常灵活。
假设你有一个 Vue 组件，其中有一个数据属性 <code>isStyled，你想根据这个属性动态地改变元素的样式。
1.1动态 CSS 类
<template>
<div :class="{ 'styled': isStyled }">code>
<p>这是一个动态样式的例子</p>
</div>
<button @click="toggleStyle">切换样式</button>code>
</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' }">code>
<p>这是另一个动态样式的例子</p>
</div>
<button @click="toggleStyle">切换样式</button>code>
</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 }">code>
<child-component :isStyled="isStyled"></child-component>code>
</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 }">code>
<!-- 子组件的内容 -->
</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 }">code>
<child-component :highlightColor="highlightColor"></child-component>code>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
highlightColor: 'yellow', // 或者根据其他条件来动态改变
};
},
};
</script>
在子组件中：
<template>
<div :style="{ backgroundColor: highlightColor }">code>
<!-- 子组件的内容 -->
</div>
</template>
<script>
export default {
props: {
highlightColor: String,
},
};
</script>
父组件使用:style绑定动态的内联样式，根据 highlightColor 的值来设置背景颜色。子组件同样使用:style绑定动态的内联样式，根据 highlightColor 的值来设置背景颜色。
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。