Vue动态样式

一、动态样式

作用：使用声明式变量来控制class、style的值。

1.class动态样式绑定

1. 静态class样式

<h2 class='box'>静态的class样式</h2>

2. 普通变量形式

 <h2 :class='cc'>动态的class样式</h2>

3. 字符串拼接语法

<h2 :class='`box ${cc} ${ff}`'>动态的class样式（字符串拼接语法）</h2>

1. 数组语法
   每个表达式都要求返回一个已经定义过的css类

<h2 :class='["box", `${cc}`, ff, createCC(), true?"c3":"c2"]'>动态的class样式（数组语法）</h2>

2. 对象语法

<h2 :class='{
      box: true,
      [`${cc}`]: true,
      [ff]: fBol,
      [createCC()]: true,
      c3: cBol,
      c2: !cBol
    }'>动态的class样式（对象语法）</h2>

2.style动态样式绑定

1. 静态的style样式

<h2 style='color: red;font-size:20px;'>静态的style样式</h2>

2. 字符串拼接

<h2 :style='`color:${"red"};fontSize:20px;`'>动态的style样式（字符串拼接语法）</h2>

3. 普通变量

<h2 :style='s1'>动态的style样式</h2>

4. 数组语法
   数组中的每个对象都是“css属性:css属性值”构成的对象。

<h2 :style='[
      {color:"red",fontSize:"20px"},
      {color: co, ["font-size"]: `${fz}px` },
      {[`margin-${margin}`]: `${size}px`},
      createSS()
    ]'>动态的style样式（数组语法）</h2>

5. 对象语法

<h2 :style='{
      color: co,
      fontSize: `${fz}px`,
      [`margin-${margin}`]: `${size}px`,
      ...createSS()
    }'>动态的style样式（对象语法）</h2>