目录
官方文档：Class 与 Style 绑定 — Vue.js (vuejs.org)
扫描二维码关注公众号，回复：
16185315 查看本文章
字符串写法
字符串写法把data中的实例的值当作字符串填入class中来改变样式
这种方式是最灵活的
使用场景：样式的类型不确定
字符串绑定类样式：
<div :class="myclass">你好</div>字符串使用的是vue实例data中的已有属性
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<style>
.daxie{
font-size: 50px;
}
.yanse{
color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="myclass1" >
你好,vue
</div>
<div :class="myclass2" >
你好,vue
</div>
<div :class="myclass3" >
你好,vue
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data() {
return {
myclass1:"daxie",
myclass2:"yanse",
myclass3:'daxie yanse'
}
},
});
</script>
</html>浏览器输出结果
对象写法
使用场景：样式个数、类名确定，通过Boolean动态展示与否
对象写在内联样式
对象方式绑定内联样式：
<div :class="{类样式:boolean类型的变量}">你好</div>实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<style>
.daxie{
font-size: 50px;
}
.yanse{
color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="{daxie:isDaxie,yanse:isYanse}" >
你好,对象
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data() {
return {
isDaxie:true,
isYanse:false
}
},
});
</script>
</html>浏览器输出结果
通过控制台修改后把颜色样式修改为真
对象写在data中
对象写在data中绑定：
<div :class="data中创建的对象名">你好</div>实例
data中的对象k值要和css中的类样式名一致，value值可以随便写但不能为空最好和类样式名一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<style>
.daxie{
font-size: 50px;
}
.yanse{
color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="classObject">
对象2-你好
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data() {
return {
classObject:{
daxie:"lfghfhfdfg",
yanse:""
}
}
},
});
</script>
</html>浏览器输出结果
数组写法
使用场景：需要绑定的样式个数不确定，类名也不确定
内联写法
数组中一个元素对应一个类样式
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<style>
.daxie{
font-size: 50px;
}
.yanse{
color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="[class1,class2]">
数组1-你好
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data() {
return {
class1:"daxie",
class2:"yanse"
}
},
});
</script>
</html>浏览器输出结果
数组里加三元表达式
实例
大写能不能绑定上样式，要看isActive是真还是假
<div :class="[isActive?daxie:'',yanse]">数组2-你好</div>写在data中
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue2</title>
<style>
.daxie{
font-size: 50px;
}
.yanse{
color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="classList">
数组2-你好
</div>
</div>
</body>
<script src="../js/vue2.7.js"></script>
<script>
var app = new Vue({
el: '#app', // 用于指定当前vue实例为哪个容器使用，值为css选择器字符串
data() {
return {
classList:["daxie","yanse"]
}
},
});
</script>
</html>浏览器输出结果
总结
虽然有很多中绑定类样式的方法，但是每种类型各有千秋，要根据使用场景来去使用