This article brings you a brief introduction to several styles used in Vue (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Use class style

1. Array

  
这是一个邪恶的H1

2. Use ternary expression in array

  
这是一个邪恶的H1

3. Nested objects in array

  
这是一个邪恶的H1

4. Use the object directly

  
这是一个邪恶的H1

Use inline style

1. Write the style object directly on the element in the form of :style

  
这是一个善良的H1

2 . Define the style object into data and directly reference it to: style

• Define the style on data:

 data: {
      h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
 }

• In the element, apply the style object to the element through attribute binding:

 
这是一个善良的H1

3. In :style, reference multiple data through an array The style object

• defines the style on data:

  data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
  }

• In the element, in the form of attribute binding , apply the style object to the element:

 
这是一个善良的H1

Related recommendations:

Example of VUE component: How does the VUE component implement countdown?

Detailed analysis of threads and processes in Node.js

The above is the detailed content of A brief introduction to several styles used in Vue (with code). For more information, please follow other related articles on the PHP Chinese website!