vue添加 class和style

使用vue动态添加class

使用属性绑定的形式进行添加

<h1 :class="['red']">属性绑定red</h1>

也可以直接传递一个数组

<h1 :class="['red','thin']">通过数组绑定red和thin</h1>

在数组中可以使用三元表达式

<h1 :class="['red','thin',flag?'active':'italic']">通过三元表达式设置active</h1>

在数组中使用对象

<h1 :class="['red','thin',{'active':'flag'}]">通过数组中对象设置active</h1>

也可以直接使用对象

<h1 :class="classObj">直接使用对象加载</h1>

上述对应的css如下：

<style type="text/css">
.red{
    color:red;
}
.thin{
    font-weight:200;
}
.italic{
    font-style:italic;
}
.active{
    letter-spacing:0.5em;
}
</style>

对应的js如下：

var vm=new Vue({
    el:'#app',
    data:{
        flag:true,
        classObj:{red:true,thin:true,active:false,italic:true}
    }
})

效果如下：

使用vue动态添加style

可以以对象的形式添加

<h1 :style="styleObj">这是一个标题</h1>

也可以使用对象数组的形式

<h1 :style="[styleObj,styleObj2]">这是一个标题</h1>

对应的js如下：

var vm=new Vue({
    el:'#app',
    data:{
        styleObj:{'color':'red','font-weight':200},
        styleObj2:{'font-style':'italic'}
    }
})

效果如下：