重学vue笔记之动态样式（class与style）

说明

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>

求点赞、关注