HTML样式的绑定无非就Class和Style的绑定,使用Vue的时候原生的绑定形式仍然可以使用,但是既然都使用了Vue了,还是建议遵循Vue的语法规范。
一. 绑定 HTML Class
1.1 对象语法
之前我们说过,html中绑定属性的方式是使用【v-bind】,那么 class 的绑定也一样
<body>
<div id="app">
<div v-bind:class="{ active: isActive }"></div>
</div>
</body>
上面代码中我们使用【v-bind】为class绑定了一个对象,对象中 active 为class的名称,样式是否生效取决于 isActive 是否为真值。
<body>
<div id="app">
<div v-bind:class="{ active: isActive,important:isport }"></div>
<!-- <div class="active"></div> -->
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
isActive: true,
isport: false,
}
})
</script>
上面代码中我们为一个html绑定了多个class,但是只有 active 是生效的,因为 isport 的值为 false ,有了这样的语法之后,我可以直接通过控制数据来控制哪些样式生效。
【在属性的绑定中我们可以使用表达式或者计算属性】
<body>
<div id="app">
<div v-bind:class="getClass()"></div>
<!-- <div class="active"></div> -->
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
isActive: true,
isport: false,
},
methods: {
getClass() {
return {
active: this.isActive,
important: this.isport
}
}
}
})
</script>
上面代码中我们在class的绑定中使用了表达式,表达式是一个函数的调用,在函数中我们可以定义更加复杂的样式逻辑和样式列表。
<body>
<div id="app">
<div v-bind:class="classList"></div>
<!-- <div class="active"></div> -->
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
isActive: true,
isport: false,
},
computed: {
classList() {
return {
active: this.isActive,
important: this.isport
}
}
}
})
</script>
上面代码中我们使用【计算属性】同样定义了一个样式对象,在计算属性逻辑中我们也可以定义更加复杂的样式列表,有了表达式和计算属性为我们的样式绑定提供了个更加强悍的功能。
1.2 数组语法
上面介绍了对象的语法,可以说很强悍,那么我再整理一下数组绑定样式的写法。
<body>
<div id="app">
<div v-bind:class="[isActive,isport]"></div>
<!-- <div class="active important"></div> -->
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
isActive: "active",
isport: "important",
}
})
</script>
上面代码中通过数组的方式定义绑定了2个class属性,其实就是构成了【data】属性值到样式名称之间的映射。
我们同样也可以在数组语法中使用表达式,引用官网的一个例子
<div v-bind:class="[isActive ? activeClass : '', errorClass]">
上面代码中class中始终有 errorClass ,但是 activeClass 是否添加取决于 isActive 是否为真值。
【总结!!】Class的绑定总觉得数组的形式过于繁琐,我们需要定义很多映射关系属性,所以从简洁的角度出发,建议还是使用【对象】的形式。
1.3 组件绑定Class
如果知道组件,那就看一下,不知道的就先跳过吧。
当我们为组件添加class的时候,所有的class会被添加到组件的【根元素上】面,这个根元素上面已经有了的class不会被覆盖。
我们先定义一个组件
Vue.component('hello', {
template: `
<div class="root">
<h1>Hello</h1>
</div>
`
})
接下来应用组件,并添加Class
<body>
<div id="app">
<hello class="later"></hello>
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
})
</script>
渲染的结果如下
<body>
<div id="app">
<div class="root later">
<h1>Hello</h1>
</div>
</div>
</body>
上面代码中,later被添加到了 hello 组件的【根节点】上,上面我们是用的原生的 Class 进行绑定的,接下来我们换成Vue的绑定形式,会发现其实效果是一样的,也是绑定到了【根节点】上面。
<body>
<div id="app">
<hello :class="{later:isLater}"></hello>
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
isLater: true
}
})
</script>
二. 绑定内联样式
上面介绍了Class的绑定,我再总结一下内联样式的绑定
2.1 对象语法
在Class的绑定中,对象的属性是Class名称,属性值用于判断该Class是否生效;在内联样式的绑定中,属性是【样式名】,属性值是【样式值】
<body>
<div id="app">
<h1 :style="{color:colorVal,fontSize:sizeVal}">BLUE</h1>
<!-- <h1 style="color: blue; font-size: 20px;">BLUE</h1> -->
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
colorVal: 'blue',
sizeVal:"20px"
}
})
</script>
上面代码将样式对象直接绑定到了HTML元素中,短横线分割的命名被改成了驼峰命名,Vue1.0中这个要求是比较严格的,但是Vue2.0中支持了短横线的命名规则。
上面我们在绑定Class的时候使用了【计算属性】和【表达式】的形式,在内联样式中我们也来玩一下
<body>
<div id="app">
<h1 :style="styleList">BLUE</h1>
<!-- <h1 style="color: blue; font-size: 20px;">BLUE</h1> -->
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
colorVal: 'blue',
sizeVal: "20px"
},
computed: {
styleList() {
return {
color: this.colorVal,
fontSize: this.sizeVal
}
}
}
})
</script>
上面代码使用【计算属性】返回一个对象,用于内联样式,表达式就不演示了,和Class的绑定基本是一样的。
2.2 数组语法
内联样式的数组语法其实就是将对各样式对象用于一个HTML元素,数组中是一个一个的对象
<body>
<div id="app">
<h1 :style="[styleList,anotherList]">BLUE</h1>
<!-- <h1 style="
color: blue;
font-size: 20px;
font-weight: bold;
background-color: gray;">BLUE</h1> -->
</div>
</body>
<script>
let vm = new Vue({
el: "#app",
data: {
colorVal: 'blue',
sizeVal: "20px",
backgroundColor: 'gray',
fontWeight: "bold"
},
computed: {
styleList() {
return {
color: this.colorVal,
fontSize: this.sizeVal
}
},
anotherList() {
return {
backgroundColor: this.backgroundColor,
fontWeight: this.fontWeight
}
}
}
})
</script>
上面代码定义了两个【计算属性】返回两个样式对象,然后绑定到内联样式的数组中,最后解析成注释的那样子。总感觉数组形式的绑定挺麻烦的,反正我不大喜欢用数组进行绑定,但是在分离样式对象的时候还是挺有用的。