When learning js, we learned how to dynamically switch element styles. The specific steps are as follows:
-
Get element first
-
Modify the style. Modify through className or style
<head> <style> .class1 { border: 1px solid black; height: 20px; width: 20px; } </style> </head> <body> <div id='app'></div> <button onclick="change()">Change style</button> </body> <script> function change() { var app = document.querySelector("#app") app.className = 'class1' app.style = 'color:red' } </script>
Using js can achieve the effect of dynamically modifying styles, but it will be a little cumbersome and inconvenient. When there are more styles to be dynamically modified, the code will become particularly lengthy and not conducive to maintenance. Speaking of this, we will invite today's leading role, the big brother vue. Yes, today we will talk about how vue dynamically binds class and style.
class dynamic binding
In order to prove that this method is easy to use, change the above code first.
<head>
<style>
.class1 {
border: 1px solid black;
height: 20px;
width: 20px;
}
</style>
</head>
<body>
<div id="app">
<div :class="class1"></div>
<button @click="change">Change style</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
class1: ''
},
methods: {
change() {
this.class1 = 'class1'
}
},
})
</script>In vue, the data attribute class1 is dynamically bound through v-bind(:). When the button is clicked, the change method will be triggered to transform the value of class1, so as to change the style of div. From the above point of view, it is much more convenient than the method of dynamically changing element style in native js. In fact, the implementation of dynamic style can also be understood as treating class as a variable and dynamically switching styles by changing the value of class.
After you have a general understanding of class dynamic binding, you can further understand it.
Add class
<div class="class1" :class="class2" ></div>
There are two classes in the above code. The difference is that the latter class adds v-bind(:). I guess some people think that class2 will overwrite the style of class1, but because of the addition of v-bind, the situation that should have been overwritten has been changed into addition, that is, the style of div will show the following effect
<div class="class1 class2" ></div>
Add class array
You can use this method if you need to add more than one style to an element
<div :class="classNames"> hi,everyone!!</div>
data: {
classNames: ['class1', 'class2', 'class3']
}Using the array method can quickly add or delete styles.
You can also use the following method, but this method has many disadvantages. It is not recommended to use it, just for understanding
<div :class="[class1,class2,class3]"> hi,everyone!!</div>
Add class object
This method is used to determine the style to use, but now a style is not displayed or displayed
grammar
Object name:{
Style 1:true|false,
Style 2:true|false
}Concrete implementation
Style 1 is required to display but style 2 is not
<div :class="objClass"> hi,everyone!!</div>
data:{
objClass:{
class1:true,
class2:flase
}
}You can also use the following method, but this method has many disadvantages. It is not recommended to use it, just for understanding
<div :class="{class1:true,class2:flase}"> hi,everyone!!</div>Case: realize random switching between multiple styles
<style>
.class1 {
color: black;
}
.class2 {
color: blue;
}
.class3 {
color: green;
}
</style>
</head>
<body>
<div id="app">
<div :class="className"> hi,everyone!!</div>
<button @click="change">Change style</button>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
className: ''
},
methods: {
change() {
let arr = ['class1', 'class2', 'class3']
let index = Math.floor(Math.random() * 3)
this.className = arr[index]
console.log(index)
}
},
computed: {}
})
</script>