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

}

<ul class="rs_tree">

<li v-for="node in treeData">

<div @click="childrenShow(node,$event)" class="rs_tree_text">

<span class="rs_tree_dot" v-if="!isFolder(node)"></span>

<em class="fa fa-folder" v-if="isFolder(node)&&!node.isShow"></em>

<em class="fa fa-folder-open" v-if="isFolder(node)&&node.isShow"></em>

<span class="rs_tree_label">{{node.text}}</span>

<input type="text" class="rs_edit_input" v-model="node.text" @click="stop($event)" @keyup.enter="editEnd()">

<div class="rs_tree_icon" v-if="node.add" @click="addItem(node,$event)" title="新增"><i class="fa fa-plus"></i></div>

<div class="rs_tree_icon" v-if="node.edit" @click="editItem(node,$event)" title="编辑"><i class="fa fa-edit"></i></div>

<div class="rs_tree_icon" v-if="node.del" @click="delItem(node,$event)" title="删除"><i class="fa fa-trash"></i></div>

</div>

<items v-if="isFolder(node)" v-show="node.isShow" :tree-data="node.children" transition="node-down"></items>

</li>

---