对象语法
class与style的绑定主要用到 v-bind 指令,也可简写成“:”。
vue的class和style绑定的方法很多,可以通过单个变量,对象,数组,计算属性,三木运算来绑定class和style。介绍几种常用方法.他的绑定是非常灵活的,只要,想的通基本都可以实现。详细了解可以,去官网进行学习查看。
<!--HTML部分-->
<!--第一种办法-->
<!--写法一-->
<p v-bind:class="{active:isActive}">如果isActive为true你就可以看到我变成红色了!</p>
<!--写法二-->
<!--可以同时加载多个class通过不同的变量值来判断他是否添加该class,如下写法-->
<p v-bind:class="{active:isActive,‘demo’:Demo}">如果isActive为true你就可以看到我变成红色了!</p>
<!--第二种办法-->
<!--也可以用对象的方式绑定-->
<p v-bind:class="styobj">可以写在对象里面控制class是否添加</p>
<!--根据数据给当前列表添加class-->
<!--这种效果还是比较常用的,因为vue本身就是数据驱动页面模式-->
<!--这里的意思是循环一个列表,当前的列表的下标对2进行取余为0的话,那么就给当前的列表添加active这个class样式,反之,就不添加-->
<ul>
<li :class="[{active:index%2 == 0}]" v-for="(name,index) in names">{{name}}</li>
</ul>
//js部分
export default{
name:"style",
data(){
return{
active:true,
"demo":true,
styobj:{
active:true,
"demo":true
},
names:["dd","bb","cc","ee"]
}
}
}
/*css部分*/
.active{
color: red;
}
. demo{
background: blue;
}