前端UI框架——VueAPI使用之Class 與 Style 繫結
阿新 • • 發佈：2019-02-01
一、基本介紹
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
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>