了解vue动态绑定

vue中动态绑定样式有两种方法

1.动态绑定class

2.动态绑定style

一、动态绑定class

接下来我们先了解一下怎么动态的设置class

首先，动态的设置class是什么意思呢

打个比方：

<div class="a"></div>

先埋伏好两个类一个是.a{}一个是.b{}，到时候我要改样式，我就把a改成b，这个动作就相对于动态修改属性的值，类似于v-bind简写为“：”

<div class="xxxx"></div>

语法：

格式1：<标签:class="变量"/>

格式2：<标签:class="{类名1:布尔值,类名2:布尔值}"/>

如果布尔值为true，就添加对应的类名

说明：可以和静态class共存

示例代码

<template>
  <div id="app">
    <h3>动态绑定class</h3>
    <!-- 固定的 -->
    <p class="red">p的内容 样式是固定的</p>
    <p :class="type">p的内容 class="变量"</p>
    <p :class="['red','font']">p的内容 class="数组"<