1. Bind inline styles (style property)

  1. When: Inline styles are preferred when only individual CSS property values are modified
  2. For example, when making a game, control the direction of the main character :left top, etc., control the display and hide of an element :display:none
  3. How to:
< element :style=" variable "> 2).new Vue() : data:{variable :" CSS attribute 1: value 1; CSS property 2: value 2; ..." 3). Problem: Because multiple CSS attributes are mixed in a string, it is impossible to add or subtract a CSS attribute value at will, which makes it difficult to modify a CSS attribute in styleCopy the code
HTML :< element :style=" variable "> 2). Var vm=new Vue({data:{variable :{CSS properties: value, CSS properties: value,.....) }}}) 3). Advantages: Very easy to modify only one of the CSS properties! Vm.variable.css property value =" XXX "//new Vue() when modified or this. Variable. CSS property value =" XXX "//new Vue() internal modificationCopy the code

2. The binding class

  1. When: When to modify multiple CSS properties in batches, the class property is preferred
  2. For example, when a form is validated with styles, the message switches back and forth between validated and failed styles. Because each style contains multiple CSS properties, batch modification with class works best
  3. How to:
A. Bad practice: 1). Bind the class attribute as a normal string. Class =" class1 class2 class3..." > ii. new Vue({data:{variable: "class1 class2 class3...") }}) 3). Disadvantages: It is not convenient to operate only one of many classesCopy the code
B. Good practice: 1). Bind the class attribute as an object: 2). How to: Class1 :true, class2:false, < element :class=" variable "> ii.new Vue({data:{variable :{) . :... }}})Copy the code
HTML: < element class=" fixed class" :class=" variable "> 2).new Vue({data:{variable: {possible variation of class: true or false,... :... }}}) 3). Result: : a class whose value is true is first compiled into a class string and then concatenated with the fixed class string in the class without: to form a final class that decorates the elementCopy the code