Vue语法：类名和样式绑定

68 阅读 0 评论 45 点赞

我是靠谱客的博主香蕉皮卡丘，最近开发中收集的这篇文章主要介绍Vue语法：类名和样式绑定，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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/vue@2.5.16/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/vue@2.5.16/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>