Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to use CSS in Vue. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

1. Class

The class attribute can be added directly to the Vue template, and supports a variety of ways, such as objects, arrays, JS expressions, to put it bluntly, in order to be more flexible to modify class.

If the css does not involve modifications in the code, just use the static class:

"Front-end lesson"

If some css changes depending on your business, you need to bind class,vue dynamically. There are many ways to do this:

1. Write objects in templat

This syntax rule is similar to defining an object in js. If isDark is true, it binds the H2 element to dark-text, otherwise it binds light-text.

{{title}}

You need to define css dark-text and light-text so that you can render the style to the HTML element.

.dark-text {color: # fff;} .light-text {color: # 000;}

Define the property isDark in js so that the value of isDark can be modified and the style can be changed dynamically.

Data () {return {isDark: false, title: 'front-end lesson'}}

2. Write objects in js

You can write dynamic class logic directly into JS code, which reduces the amount of business logic defined in the template.

{{title}}. Dark-text {color: # fff;}. Light-text {color: # 000 } data () {return {colorMode: {dark: false}, textMode: {'dark-text': false,' light-text': true}, title: 'front-end lesson'}, methods: {changeMode () {const isDark = this.colorMode.dark This.textMode ['dark-text'] = isDark; this.textMode [' light-text'] =! isDark;}

3. Use array

The above two ways can set multiple class through the array, and the syntax is the same as the array definition in js.

This article comes from the official account Suyan. Content {color: # 000; font-size: 17px; margin: 10px;} .stress {color: red;} data () {return {isStress: true, contentObj: {content: true}

4. Use ternary expressions

This article comes from the official account Suyan. Stress {color: red;} data () {return {isStress: true}}

II. Style

Vue can also set attributes to the HTML element through style. The usage is the same as that of class. If you want to set css to the HTML element through style, you can dynamically bind css to HTML by: style.

1. Using objects in a template

The object set in the template sets the font color and font size for the element, and dynamically modifies the font color and size of the element through the attribute values activeColor and fontSize.

Data () {return {activeColor: 'blue', fontSize: 20}}

two。 Define objects in js

Define styling objects directly into js rather than templates.

Data () {return {contentStyle: {color: 'blue', fontSize: 20}

3. Use array

Define styling objects directly into js rather than templates.

Data () {return {fs: 20, contentStyle: {color: 'blue'} this is the end of the article on "how to use CSS in Vue". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.