VUE dynamically binds class names and styles
1. Use the v-bind attribute to bind class and style attributes
2. Two ways to dynamic class name:
- Object form: Assign boolean type value to object attributes
- Arrays are combined with ternary operators to add and delete class names by changing the authenticity of the conditions.
<template>
<div>
<div :class="classObj">Dynamic binding object</div>
<div :class="['namebox', activeStatus ? 'activeNamebox' : '']">
Dynamically bind arrays
</div>
</div>
</template>
<script>
export default {
data() {
return {
classObj: {
namebox: true,
activeNamebox: false
},
activeStatus: false
}
}
}
</script>
<style>
.namebox {
color: #777;
}
.activeNamebox {
background-color: aquamarine;
}
</style>3. Two ways to dynamic style
- Object Form
- Array (including style objects) form: multiple style objects can be added at the same time
<template>
<div>
<div :style="styleObj1">Object Form</div>
<div :style="[styleObj1, styleObj2]">Array form</div>
</div>
</template>
<script>
export default {
data() {
return {
styleObj1: {
color: '#eee'
},
styleObj2: {
textAlign: center
}
}
}
}
</script>
<style></style>Dynamic binding style—Dynamic binding style writing & Dynamic class writing
1. Dynamic binding style writing
Notice:
Any style attribute name with - must be changed to camel, for example, font-size must be changed to fontSize
In addition to bound values, other attribute names should be enclosed in quotes, such as backgroundColor:'#00a2ff' instead of backgroundColor:#00a2ff
1.1. Object
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div :style="{color:(index == 1 ? conFontColor:'#000')}"></div>1.2. Array
<div :style="[baseStyles, overridingStyles]"></div>
<div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div>1.3. Triple operator
<div :style="{color:(index == 1 ? conFontColor:'#000')}"></div>
<div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div>
<div :style=" === activeLayerName?'font-weight:700' : 'font-weight:400'"></div>
<!-- Writing method one -->
<div :style="[{float: id === '12' ? 'left:'right}]"></div>
<!-- Writing method two -->
<div :style="float: === 20 ? 'height:64px' : 'height:32px' "></div>
<!-- Writing method three -->
<div :style="{border:( nameId === ?'2px solid #4C78FF': 'red')}"></div>1.4. Bind data object
<div :style="styleObject"></div>
<script>
data() {
return{
styleObject: {
color: 'red',
fontSize: '14px'
}
}
}
</scrip>2. Dynamic class writing method
2.1. Object method
<!-- isActive —— true/false -->
<div :class="{ 'active': isActive }">{{name}}</div> 2.2. Determine whether to bind an active
<div :class="{'active' : isActive == -2}" >{{name}}</div>
<div :class="{'active' : isActive == }" >{{}}</div>2.3. Bind and judge multiple
2.31. The first type: Separate it with a comma
<div :class="{ 'active': isActive, 'user': isUser }"></div>2.32. Put it in data
<div :class="classObject">{{name}}</div>
<script>
data() {
return {
classObject:{ active: true, user:false }
}
}
</script>2.33. Use computed attributes
<div :class="classObject">{{name}}</div>
<script>
data() {
return {
isActive: true,
isUser: false
}
},
computed: {
classObject: function () {
return {
active: ,
user:
}
}
}
</script>2.4. Array method
2.41. Simple array
<div :class="[isActive,isUser]">{{name}}</div>
<script>
data() {
return{
isActive:'active',
isUser:'user'
}
}
</script>2.42. Combining array and ternary operators to determine the required class
Note: The class on both sides of the ":" after the ternary operator needs to be given single quotes, otherwise it cannot be rendered correctly.
:class="[isActive?‘active':'']" or :class="[isActive1?‘active':'']" or :class="[isActiveindex?‘active':'']" or :class="[isActive==index?‘active':‘otherActiveClass']"
2.43. Dynamic judgment of array objects combined with dynamic
//The first active can be added without single quotes in the object, and the second sort must be added with single quotes in the object.:class="[{ active: isActive }, ‘sort']"
or
:class="[{ active: isActive1 }, ‘sort']"
or
:class="[{ active: isActiveindex }, ‘sort']"Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.