回顧 大致掌握了上一節的 插值語法 我已經可以把想要的數據顯示到頁面上，並且僅需要修改變數，頁面就會跟著實時改變 但如果對於已經熟悉前端的人來說，單單有數據還是不太行，還需要css對數據進行樣式的修飾，讓頁面更加好看 所本篇將記錄記錄 Class 與 Style 綁定 的學習 總所周知，想要給DOM ...
回顧
大致掌握了上一節的 插值語法 我已經可以把想要的數據顯示到頁面上，並且僅需要修改變數，頁面就會跟著實時改變
但如果對於已經熟悉前端的人來說，單單有數據還是不太行，還需要css對數據進行樣式的修飾，讓頁面更加好看
所本篇將記錄記錄 Class 與 Style 綁定 的學習
總所周知，想要給DOM增加元素有兩種方式，一種採用class選中，一種是直接內聯樣式綁定
綁定HTML Class
Vue對於綁定Class提供了兩種語法：
請務必準備好以下css樣式，並且能在HTML中索引到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>Document</title>
<style>
body{
height: 100%;
}
div{
width: 500px;
}
.style1{
font-size: larger;
text-align: center;
}
.style2{
color: blueviolet;
height: 500px;
}
.style3{
background-color: pink;
line-height: 500px;
}
</style>
</head>
<body>
<div class="">Hello world</div>
</body>
<script>
</script>
</html>
如果按照正常寫法，也可以直接這麼做
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>Document</title>
<style>
body{
height: 100%;
}
div{
width: 500px;
}
.style1{
font-size: larger;
text-align: center;
}
.style2{
color: blueviolet;
height: 500px;
line-height: 500px;
}
.style3{
background-color: pink;
}
</style>
</head>
<body>
<div id="root" :class="className">Hello world</div>
</body>
<script>
new Vue({
el:"#root",
data:{
className:"style1"
}
})
</script>
</html>
那麼接下來，正文開始.....
對象語法
在對象語法中，可以在data裡面，配置一個key為style名稱，值為Boolean的對象，當使用v-bind綁定class時。
class可以是上面說的創建的對象，如果那個key的value為true，那麼該樣式就是啟用的，反之不啟用
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>Document</title>
<style>
body{
height: 100%;
}
div{
width: 500px;
}
.style1{
font-size: larger;
text-align: center;
}
.style2{
color: blueviolet;
height: 500px;
line-height: 500px;
}
.style3{
background-color: pink;
}
</style>
</head>
<body>
<div id="root" :class="classObj">Hello world</div>
</body>
<script>
new Vue({
el:"#root",
data:{
classObj:{ //該對象的key可以為class的樣式名稱
style1:true, //開啟字體水平居中 字體放大
style2:false, //關閉字體顏色 div高度 垂直居中
style3:true, //開啟背景顏色
}
}
})
</script>
</html>
數組語法
綁定樣式還有另外一種語法，也就是 數組語法
當綁定的class是一個數組時，Vue會預設這個 數組全是樣式的名稱，這些樣式是可以疊加的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>Document</title>
<style>
body{
height: 100%;
}
div{
width: 500px;
}
.style1{
font-size: larger;
text-align: center;
}
.style2{
color: blueviolet;
height: 500px;
line-height: 500px;
}
.style3{
background-color: pink;
}
</style>
</head>
<body>
<div id="root" :class="classList">Hello world</div>
</body>
<script>
new Vue({
el:"#root",
data:{
className:"style1",
classList:["style1","style2","style3"] //把需要的樣式裝入數組
}
})
</script>
</html>
小技巧
對於預設固定的樣式，可以直接使用class，對於動態變動的樣式，可以另外起一個”v-bind:class“
Vue在解析的時候會把它們疊加在一起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://v2.cn.vuejs.org/js/vue.js"></script>
<title>Document</title>
<style>
body{
height: 100%;
}
div{
width: 500px;
}
.style1{
font-size: larger;
text-align: center;
}
.style2{
color: blueviolet;
height: 500px;
line-height: 500px;
}
.style3{
background-color: pink;
}
</style>
</head>
<body>
<!-- 預設樣式style1寫死不變 -->
<div id="root" class="style1" :class="classList">Hello world</div>
</body>
<script>
new Vue({
el:"#root",
data:{
className:"style1",
classList:["style2","style3"] //把需要的樣式裝入數組
}
})
</script>
</html>
綁定內聯樣式
Vue對於內聯樣式也有兩種綁定方式
對象語法
Vue允許將css對象直接配置成鍵值對，例如：
.style1{
background-color:red;
}
可以直接配置成js對象的
{
backgroundColor:'red',
}
註：其中要去掉”-“，然後採用駝峰命名方式，當然你也可以使用字元串的對象形式，例如：{'background-color':'red'}
具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
<style>
body{
height: 100%;
}
div{
width: 500px;
}
</style>
</head>
<body>
<div id="root" :style="styleObj">Hello world</div>
</body>
<script>
new Vue({
el:"#root",
data:{
styleObj:{
fontSize: 'larger',
textAlign: 'center',
color: 'blueviolet',
height: '500px',
lineHeight: '500px',
'background-color': 'pink' //採用字元串，原模原樣寫也可以
}
}
})
</script>
</html>
數組語法
這個數組的語法和對象語法類型，都是把寫好的樣式塞進數組，Vue會自動解析，因為用的不多，再次就不再詳細解釋
去官網詳細看看吧~
End
本節完~~~~~~
下一篇：零基礎入門Vue之To be or not to be——條件渲染
