1、绑定class
- 绑定单个class
<div id="app">
<p :class="{'active':isActive}">这是文字</p>
</div>
<script>
//创建一个实例vm
const vm = new Vue({
el:"#app",
data:{
isActive:true
}
});
</script>
渲染完成的结果
微信图片_20180108091607.jpg
- 绑定多个class
<p :class="{
'active':isActive,
'danger':isDanger,
'error':isError
}">这是文字</p>
data:{
isActive:true,
isDanger:true,
isError:false
}
渲染完成的结果
微信图片_20180108092612.jpg
- 数组方式绑定class
<p :class="[activeClass,errorClass]">
这是文字
</p>
data:{
activeClass:'active',
errorClass:'error'
}
渲染完成的结果
微信图片_20180108094944.jpg
2、绑定内联样式style
- 对象语法
<p :style="{color:colorStyle}">
这是文字
</p>
data:{
colorStyle:'red'
}
渲染完成的结果
微信图片_20180108095256.jpg
3、实例
此处的操作class的函数，具体见“原生JS”章节
- HTML代码如下
.red{
color: red;
}
<div id="app">
<p id="p1" class="aa" :class="{red:isred}">我是变换的</p>
<button @click="changeClass">换</button>
</div>
- JS代码如下
var vueObj = new Vue({
el:"#app",
data:{
isred:true
},
methods:{
changeClass:function(){
var _this = this;
if( hasClass(document.getElementById("p1"), 'red') ){
removeClass(document.getElementById("p1"), 'red');
}else{
addClass(document.getElementById("p1"), 'red');
}
}
}
});
