Vue中设置class类样式
vue中通过属性绑定为元素设置class类样式vue中class类样式的4种绑定方式1、数组2、三元表达式3、数组嵌套对象4、直接使用对象vue中class类样式的4种绑定方式1、数组<h1 :class="['thin','red','italic','active']">你看这个碗,他又大又圆!</h1>实例代码:<!DOCTYPE html><htm
·
vue中通过属性绑定为元素设置class类样式
vue中class类样式的4种绑定方式
1、数组
<h1 :class="['thin','red','italic','active']">你看这个碗,他又大又圆!</h1>
实例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<h1 :class="['thin','red','italic','active']">你看这个碗,他又大又圆!</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isActive: false
},
methods: {
}
});
</script>
</body>
</html>
可以发现:class="[‘thin’,‘red’,‘italic’,‘active’]"的写法和class="thin red italic active"的效果时一样的,甚至更加繁琐。
2、三元表达式
<h1 :class="['thin','red','italic',isActive?'active':'']">你看这个碗,他又大又圆!</h1>
实例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<h1 :class="['thin','red','italic',isActive?'active':'']">你看这个碗,他又大又圆!</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isActive: false
},
methods: {
}
});
</script>
</body>
</html>
可以看出在数组的基础上可以添加三元表达式,类的存在和data中数据的true/false进行绑定,从这个角度上来说,使用数组的方式虽然繁琐,但是功能还可以接受。
3、数组嵌套对象
<h1 :class="['thin','red','italic',{'active':isActive}]">你看这个碗,他又大又圆!</h1>
实例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<h1 :class="['thin','red','italic',{'active':isActive}]">你看这个碗,他又大又圆!</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isActive: false
},
methods: {
}
});
</script>
</body>
</html>
可以看出,在数组中嵌套对象和三元表达式的方法区别不大,使用的符号更多,更不利于记忆,但是方便阅读。
4、直接使用对象
<h1 :class="{red:false, italic:true, active:true,thin:true}">你看这个碗,他又大又圆!</h1>
实例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vueApp</title>
<style>
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: 0.5em;
}
</style>
</head>
<body>
<div id="app">
<h1 :class="{red:false, italic:true, active:true,thin:true}">你看这个碗,他又大又圆!</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isActive: false,
classObj: {}
},
methods: {
}
});
</script>
</body>
</html>
可以看出,直接使用对象的方式,每个类都要判断false/true,代码量很大,但是阅读起来最直观,并且可以将对象放到data中。
<body>
<div id="app">
<h1 :class="classObj">你看这个碗,他又大又圆!</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
isActive: false,
classObj: {
red: false,
italic: true,
active: true,
thin: true
}
},
methods: {
}
});
</script>
</body>
综上所述,从可读性和操作行的角度上来说,更加推荐直接使用对象的方式进行class类样式的设置。如果class类不经常变化,没有必要使用Vue通过属性绑定为元素设置class类样式的方式进行样式设置。
更多推荐
已为社区贡献12条内容
所有评论(0)