Table of contents
Adding a ternary expression to an array
Official Documentation: Class and Style Binding - Vue.js (vuejs.org)
String writing
The string writing method uses the value of the instance in data as a string to fill in the class to change the style
This method is the most flexible
Usage scenario: the type of style is uncertain
String binding class style:
<div :class="myclass">你好</div>The string uses the existing attributes in the vue instance data
example
<!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>browser output
Object writing
Usage scenario: determine the number of styles and class names, and display them dynamically through Boolean
Object written inline style
Object way to bind inline styles:
<div :class="{类样式:boolean类型的变量}">你好</div>example
<!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>browser output
Modify the color style to true after modification through the console
The object is written in data
The object is written and bound in data:
<div :class="data中创建的对象名">你好</div>example
The object k value in data should be consistent with the class style name in css, and the value value can be written casually but cannot be empty. It is best to be consistent with the class style name
<!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>browser output
Array writing
Usage scenario: the number of styles to be bound is uncertain, and the class name is also uncertain
Inline writing
An element in the array corresponds to a class style
example
<!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>browser output
Adding a ternary expression to an array
example
Whether uppercase can be bound to a style depends on whether isActive is true or false
<div :class="[isActive?daxie:'',yanse]">数组2-你好</div>write in data
example
<!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>browser output
Summarize
Although there are many methods of binding class styles, each type has its own advantages and disadvantages, and it should be used according to the usage scenario