一 vue的class 和style的绑定
1.class绑定
:class = "data数据中的值"
对象写法
:class = "{bg:true}" 显示属性 false 不显示
:class = "{bg:true,fz:true}"
数组写法
:class="[bg,fz]" ==>取data中数据中的值
2.style绑定
对象写法
:style="{background:bg,color:cl}" ==》bg cl都是data中的数据
:style="styleObject" ==>styleObject是data中的数据对象
数组写法
:style="[bg,cl]" bg cl都是data中的数据对象
例子1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.bg {
background-color: aqua;
}
</style>
<body>
<div id="app">
<!-- <h1 class="bg">这是一个标记</h1> -->
<h1 :class="aaaa">这是一个标记</h1>
<h1 :class="{bg:isActive}">这是一个标记</h1>
<h1 :class="{bg:true}">这是一个标记</h1>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
aaaa: "bg",
isActive: false
}
})
</script>
</body>
</html>
例子2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.bg {
background-color: aqua;
}
</style>
<body>
<div id="app">
<h1 :class="{bg:isActive}">这是一个标题</h1>
<button @click="show">切换class</button>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
isActive: false
},
methods: {
show: function() {
if (this.isActive) {
this.isActive = false
} else {
this.isActive = true
}
}
}
})
</script>
</body>
</html>
例子3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.bg {
background-color: aqua;
}
.fz {
font-size: 16px
}
</style>
<body>
<div id="app">
<!-- <h1 class="bg fz">这是一个标题</h1> -->
<!-- <h1 :class="{bg:true, fz:fasle}">这是一个标题</h1> -->
<!-- class对象的写法 -->
<h1 :class="{bg:bg, fz:fz}">这是一个标题</h1>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
bg: true,
fz: true
},
})
</script>
</body>
</html>
例子4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.bg {
background-color: aqua;
}
.fz {
font-size: 16px
}
</style>
<body>
<div id="app">
<!-- class数组的写法 -->
<h1 :class="[bg, fz]">这是一个标题</h1>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
bg: "bg",
fz: "fz"
},
})
</script>
</body>
</html>
例子5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.bg {
background-color: aqua;
}
.fz {
font-size: 16px
}
</style>
<body>
<div id="app">
<!-- style对象的写法 -->
<!-- <h1 :style="{color:a,fontSize:b}">这是一个标题</h1> -->
<h1 :style="styleObjcet">这是一个标题</h1>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
a: "red",
b: "16px",
styleObjcet: {
color: "blue",
fontSize: "16px"
}
},
})
</script>
</body>
</html>
例子6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.bg {
background-color: aqua;
}
.fz {
font-size: 16px
}
</style>
<body>
<div id="app">
<!-- style数组的写法 -->
<h1 :style="[bg]">这是一个标题</h1>
<h1 :style="[bg,cl]">这是一个标题</h1>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
bg: {
background: "red"
},
cl: {
color: "#fff"
}
},
})
</script>
</body>
</html>