How to implement style binding in Vue

Editor to share with you how to achieve style binding Vue, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

1. Style binding (class, style) 1.1 binding class

The fixed class name is written normally, and the class name that needs to be dynamically bound is bound by v-bind.

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

two。 Bind class style-scenarios used in array writing: the number of styles bound is uncertain and the name is uncertain

3. Binding class style-scene used for object writing: the number of bindings is determined, the name is also determined, and what is uncertain is whether the class name is used or not

.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;} .colors {border-radius: 20%;} .color {color: skyblue } .size {font-family: 'Microsoft Yahei'; font-size: 20px; font-weight: bold } {{name}} {{name}} {{name}} Vue.config.productionTip = 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"] / / Math.floor: round down, Math.random (): 0-1 1 is not available this.mood = arr [Math.floor (Math.random () * 3)]}, remove () {this.classArr.shift ()} Change () {vm.classObj.color =! vm.classObj.color vm.classObj.outline =! vm.classObj.outline}) 1.2 bind style

For example:: style = "styleobj"

Hello, {{name}}! Vue.config.productionTip = false let vm = new Vue ({el:'# root', data: {name: "Vue", styleobj: {fontSize: 50 + "px", color: "red" Border:1+ "px" + "+" solid "+" + "black"}) these are all the contents of the article "how Vue implements style binding" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!