Vue.js样式绑定
2020-05-22 本文已影响0人
爱学习的代代
概念：class 和 style 是HTML元素的属性，用于设置元素的样式；vue里提供了v-bind指令来动态的绑定元素。
作用： 页面元素的显示与否一般会读取服务端的数据后， 在进行展示或者设置某种指定的样式。通过v-bind指令，可以动态的控制元素的展示及样式的添加。
使用方法：
- 对指定的元素指定要绑定的
class类名，类名之后跟的是逻辑控制变量（即是否将该类添加给当前元素）；如果传入的是多个键值对，即表示是否要将多个类名，添加给当前元素。（传入多个类名, 第二个类名要加入‘’单引号）
<div v-bind:class="{ active: isActive, 'text-danger': hasError}"></div>
- vue的对元素的初始化data中，对
逻辑控制变量进行赋值。true表示将该类添加到当前元素（赋予该类的css属性），false表示不添加。
1.对某一个元素绑定样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js的样式绑定</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active{
width: 200px;
height: 200px;
background: aqua;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<!-- 注意 class 与 冒号之间不要留空格。 -->
<!-- v-bind 支持传入多个类名, 第二个类名要加入‘’单引号 -->
<!-- <div v-bind:class="{ active: isActive, 'text-danger': hasError}"></div> -->
<!-- 绑定类属性的另一种写法 -->
<div v-bind:class="classOjbect"></div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
// isActive: true,
// hasError: false
classOjbect: {
active: true,
'text-danger': true
}
}
})
</script>
</body>
</html>
Note:
- v-bind:clsss 冒号与class之间不要留有空格
- 绑定类的另一种写法，直接传入一个对象
<div v-bind:class="greenBlock"></div>
...
greenBlock: {
class1: true,
'class2': false //将类1的CSS样式添加到当前元素，类2的样式不添加
}
- 将数组传入给绑定类
<div v-bind:class="[greenBlock, redBlock]"></div>
...
data: {
greenBlock: 'active',
redBlock: 'text-danger'
}
