重学vue笔记之动态样式（class与style）
程序员文章站
2022-06-17 15:22:14
说明class与style使用起来有点相似，注意判别使用class使用class绑定的有3种格式：字符串数组对象
字符串形式
对象形式
说明
class与style使用起来有点相似，注意判别
使用class
使用class绑定的有3种格式：
- 字符串
- 数组
- 对象
<template>
<div :style="classString">
字符串形式
</div>
<div :style="classObject">
对象形式
</div>
<div :style="classArray">
数组形式
</div>
</template>
data() {
return {
classString: 'red',
classObject: { red: false, green: true },
classArray: ['red', 'green', {brown: false}]
}
},
使用style
使用style绑定的有2种格式：
- 字符串
- 对象
<template>
<div :style="classString">
字符串形式
</div>
<div :style="classObject">
对象形式
</div>
<template>
data() {
return {
styleString: 'background: orange',
styleObject: {
color: 'orange',
background: 'yellow'
}
}
},
子组件使用父组件定义的样式
父亲组件中的template部分
<template>
<div>
<child :class="styleString"/>
</div>
<template>
父亲组件中的data部分
data() {
return {
styleString: 'background: orange'
}
},
child组件中的template部分
<template>
<div>
<div :class="$attrs.class">one</div>
<div :class="$attrs.class">two</div>
</div>
<template>
求点赞、关注
本文地址：https://blog.csdn.net/qq_45549336/article/details/110958807
上一篇： 解决跨域问题（前端处理）