method clas ack gree 控制 col pan json数据 ...
1.首先要定义样式
- .red{color: red;}
- .green{ color: green;}
- .blue{background: blue;}
2.数组里的red是data对象里面的red变量,值‘red’是我们定义的样式,多个以,隔开
- <div id="box">
- <strong :class="[red]">文字...</strong>
- </div>
- new vue({
- el: ‘#box‘,
- data: {
- red: ‘red‘,
- b: ‘blue‘
- },
- methods: {}
- });
3.判断true/false(以定义好的样式的class名称为变量)
- <div id="box">
- <strong :class="{green:true,blue:true}">文字...</strong>
- </div>
4.同上判断true/false(以定义好的样式的class名称为变量,在data里面定义变量控制true、false)
- data:{
- a:true,
- b:false
- },
- <div id="box">
- <strong :class="{red:a,blue:b}">文字...</strong>
- </div>
5.以json数据形式
- data:{
- json:{
- red:true,
- blue:true
- }
- },
- <div id="box">
- <strong :class="json">文字...</strong>
- </div>
vue样式之class
来源: http://www.bubuko.com/infodetail-2318460.html