Vue語法：類名和樣式綁定
- 雖然類名class和樣式style接收的類型都是字符串，但實際上類名是由數組拼接而成，而樣式是由對鍵值對拼接而成。
- 通過字符串、數組、和對象三種方式爲節點綁定類名屬性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>類名和樣式綁定</title>
<style>
.color-gray{
color: gray;
}
.size-18{
font-size: 18px;
}
.style-italic{
font-style: italic;
}
</style>
</head>
<body>
<div id="app">
<p class="color-gray size-18 style-italic">vue2.0,精誠所至，金石爲開</p>
<p :class="classStr">vue2.0,精誠所至，金石爲開</p>
<p :class="classArr">vue2.0,精誠所至，金石爲開</p>
<p :class="classObj1">vue2.0,精誠所至，金石爲開</p>
<p :class="classObj2">vue2.0,精誠所至，金石爲開</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data(){
return{
classStr:'color-gray size-18 style-italic', //拼接字符串
classArr:['color-gray','size-18','style-italic'], //數組
classObj1:{//對象綁定類名
'color-gray':true,
'size-18':true,
'style-italic':true
},
classObj2:{//對象 ,未綁定類名
'color-gray':0,
'size-18':'',
'style-italic':false
}
}
}
});
</script>
</body>
</html>
- 綁定樣式的方法與類名相似，因爲樣式是以鍵值對的形式，所以不能像類名一樣使用數組進行綁定。
爲了方便，我將代碼寫在了一起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>類名和樣式綁定</title>
<style>
.color-gray{
color: gray;
}
.size-18{
font-size: 18px;
}
.style-italic{
font-style: italic;
}
</style>
</head>
<body>
<div id="app">
類名綁定：
<p class="color-gray size-18 style-italic">vue2.0,精誠所至，金石爲開</p>
<p :class="classStr">vue2.0,精誠所至，金石爲開</p>
<p :class="classArr">vue2.0,精誠所至，金石爲開</p>
<p :class="classObj1">vue2.0,精誠所至，金石爲開</p>
<p :class="classObj2">vue2.0,精誠所至，金石爲開</p>
樣式綁定：
<p style="color:gray;font-size:18px;font-style:italic;">vue2.0,精誠所至，金石爲開</p>
<p :style="styleStr">vue2.0,精誠所至，金石爲開</p>
<p :style="styleObj1">vue2.0,精誠所至，金石爲開</p>
<p :style="styleObj2">vue2.0,精誠所至，金石爲開</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data(){
return{
/*類名綁定*/
classStr:'color-gray size-18 style-italic', //拼接字符串
classArr:['color-gray','size-18','style-italic'], //數組
classObj1:{//對象綁定類名
'color-gray':true,
'size-18':true,
'style-italic':true
},
classObj2:{//對象 ,未綁定類名
'color-gray':0,
'size-18':'',
'style-italic':false
},
/*樣式綁定*/
styleStr:'color:gray;font-size:18px;font-style:italic;',//拼接字符串
styleObj1:{//對象綁定樣式
'color':-1 ? 'gray' : 'yellow',
'font-size':[] ? '18px' : '',
'font-style':'italic'
},
styleObj2:{//對象，未綁定樣式
'color':0 ? 'gray' : '',
'font-size':'' ? '18px' : '',
'font-style':null ? 'italic' : ''
}
}
}
});
</script>
</body>
</html>
小白一枚，如有問題，請多多指教😃