版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/TDCQZD/article/details/82154817
一、基本介绍
1、绑定 HTML Class
字符串语法
对象语法
数组语法
2、绑定内联样式——Style
对象语法
二、代码示例：
1、class(字符串)
代码案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class(字符串)</title>
<style>
.juzhong{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transition:1s ;
}
.test{
width: 200px;
height: 200px;
background: pink;
}
.test2{
width: 200px;
height: 200px;
background: gray;
}
</style>
</head>
<!--Class 与 Style 绑定
1、绑定 HTML Class
字符串
数组
对象
2、绑定内联样式
v-bind:style
-->
<body>
<div id="app">
<div class="juzhong " :class="msg">
</div>
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
msg:"test"
}
})
var flag = true;
setInterval(()=>{
if(flag){
vm.msg="test2";
}else {
vm.msg="test";
}
flag =!flag;
},1000)
</script>
</html>2、class(数组)
代码案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.juzhong{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transition:1s ;
}
.test{
width: 200px;
height: 200px;
background: pink;
}
.test2{
width: 200px;
height: 200px;
background: gray;
}
</style>
</head>
<body>
<div id="app">
<div :class="[juzhong,test]" >
</div>
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
// msg:["juzhong","test"]
juzhong:"juzhong",
test:"test2"
}
})
</script>
</html>3、class(对象)
代码案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.juzhong{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transition:1s ;
}
.test{
width: 200px;
height: 200px;
background: pink;
}
.test2{
width: 200px;
height: 200px;
background: gray;
}
</style>
</head>
<body>
<div id="app">
<div :class="msg" >
</div>
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
const vm = new Vue({
el:"#app",
data:{
msg:{
test:false,
test2:true,
juzhong:true
}
}
})
setInterval(()=>{
vm.msg.test = !vm.msg.test;
vm.msg.test2 = !vm.msg.test2;
},1000)
</script>
</html>4、style(对象)
代码案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.juzhong{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transition:1s ;
}
.test{
width: 200px;
height: 200px;
background: pink;
}
.test2{
width: 200px;
height: 200px;
background: gray;
}
</style>
</head>
<body>
<div id="app">
<div :class="msg" :style="msg1">
我是一个div
</div>
</div>
</body>
<script src="../../js/vue.js"></script>
<script>
const color = "white";
const vm = new Vue({
el:"#app",
data:{
msg:{
test:false,
test2:true,
juzhong:true
},
msg1:{
'text-align': 'center',
color: color,
'line-height': '200px'
}
}
})
setInterval(()=>{
vm.msg.test = !vm.msg.test;
vm.msg.test2 = !vm.msg.test2;
},1000)
</script>
</html>