vue中怎样给元素动态的添加样式

一、Vue css过渡的基本语法

<div v-if="show" :transition="expand">hello</div>

然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS

/* 必需 */扒雹

.expand-transition {

transition: all .3s ease

height: 30px

padding: 10px

background-color: #eee

overflow: hidden

}

/* .expand-enter 定春大帆义仿森进入的开始状态 */

/* .expand-leave 定义离开的结束状态 */

.expand-enter, .expand-leave {

height: 0

padding: 0 10px

opacity: 0

}

```

<div v-for="(item, index) intemp.templateValue" :key="index">

  <el-form-item v-if="0===index" :label="$t('模板内容值')" :prop="item" :rules="{required: true,message: `${item}不能为空`,trigger: 'blur'}" required>

    <el-input v-model="temp[item]" :placeholder = "`请输入${item}内容`" type="text" style="width: 300pxdisplay: block"/>

  <el-form-item v-else :prop="item" :rules="{required: true,message: `${item}内容不能为空`,trigger: 'blur'}" required>

   喊搭 <el-input v-model="temp[item]" :placeholder = "`请输入${item}内容`" :rules="{required: true,message: `${item}不能为空`,trigger: 'blur'}" type="丛磨text" style="width: 300pxdisplay: block"/>

</郑郑拿div>

```

---