1. Style binding (class, style)
1.1 Bind class
Fixed class names are written normally, and if you need to dynamically bind the class names, v-bind to bind it.
For example::class= "mood"
Here are some applicable scenarios:
1. Bind class style—string writing method, suitable for: the class name of the style is uncertain and needs to be specified dynamically
2. Bind class style - Scenario for array writing: the number of bound styles is uncertain and the name is not certain
3. Bind class style - Scenarios used in object writing: the number of bindings is determined, the name is also determined, and the uncertainty is whether to use the class name.
<body>
<style>
.basic {
width: 100px;
height: 100px;
border: 2px solid black;
}
.happy {
width: 100px;
height: 100px;
border: 2px solid orange;
background-color: palevioletred;
}
.sad {
width: 100px;
height: 100px;
border: 2px solid black;
background-color: silver;
}
.normal {
width: 100px;
height: 100px;
border: 2px solid greenyellow;
background-color: sandybrown;
}
.outline {
border-radius: 20%;
}
.color {
color: skyblue;
}
.size {
font-family: 'Microsoft Yahei';
font-size: 20px;
font-weight: bold;
}
</style>
<div >
<!--
need1 ：Clickdiv1 Random switchmood
Bindclassstyle --- String writing
1. FixedclassClass names are written normally，Need to be dynamically specifiedclassClass name :class="xxx" Write it here
2. Scenarios used : style的类名不确定，Need to dynamically specify
-->
<div class="div1 basic" :class="mood" @click="random">{{name}}</div>
<!--
need2 ： Clickdiv2 Add a class,Or delete the class
Bindclassstyle --- Array writing
1. Scenarios used ：Bind的style的个数不确定，The name is not sure
2. shift() ：Remove the first data from the array， push("xxx")；Add a new data at the end
-->
<div class="div2 basic" :class="classArr" @click = "remove">{{name}}</div>
<!-- Note：existvueOperation " " The string written in it is an expression，" '' " The string written in it is the value -->
<!-- <div class="div2 basic" :class="['outline','color','size']"></div> -->
<!--
need3 ：existoutlineandcolorSwitch between
Bindclassstyle --- Object writing
Scenarios used：Bind的个数确定的，The name is also confirmed，Not sure whether to use this class name
-->
<div class="div3 basic" :class="classObj" @click="change">{{name}}</div>
</div>
<script>
= false
let vm = new Vue({
el: '#root',
data: {
name: "Hello,Vue!",
mood: "normal",
classArr:['outline','color','size'],
classObj:{
outline:true,
color:true
}
},
methods: {
random() {
let arr = ["happy", "sad", "normal"]
//: means rounding downward, (): The value is 0-1, and 1 cannot be obtained = arr[(() * 3)]
},
remove(){
()
},
change(){
= !
= !
}
}
})
</script>
1.2 Bind style
For example::style = "styleobj"
<div :style="styleobj">
Hello,{{name}}!
</div>
<script>
= false
let vm = new Vue({
el: '#root',
data: {
name:"Vue",
styleobj:{
fontSize: 50 + "px",
color: "red",
border:1+"px"+" "+"solid"+" "+"black"
}
}
})
</script>
Summarize
That’s all for this article, introducing how class and style are bound. I hope it can help you, and I hope you can pay more attention to more of my content!