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

This article mainly explains how to use style class in Vue. Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "how to use style class in Vue"!

What is Vue.js?

Vue is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library focuses only on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. Vue, on the other hand, is perfectly capable of providing drivers for complex single-page applications when used in conjunction with modern toolchains and various supporting libraries. We covered the basics in the previous article, which can be poked here: Vue's Learning Notes (previous article). In this article, we continue to stroke ~

2. Use style class in Vue

The first way to use it is to pass an array, where the class requires v-bind data binding.

hello world1!

The second way is to use ternary expressions in arrays.

hello world2!

The third way is to use objects instead of ternary expressions in arrays to improve readability of code.

hello world3!

When v-bind is used for class, the property of the object is a class name. Since the property of the object can be quoted or not, the value of the property is an identifier.

hello world!

The CSS style code is as follows:

The code in JS is as follows:

The effect diagram is as follows:

Style in Vue: Style in vue is dynamic binding style, and objects are collections that do not require key-value pairs.

The first way to use it is to write the object of the key-value pair in data, and directly bind it dynamically.

The first H!!

The second way to use multiple key-value pair objects, using array mode, written in turn;

The first H1!!

The code in JS is as follows:

The effect diagram is as follows:

V-If and V-Show

V-if features: Each time the element is deleted or created again, there is a high switch performance cost.

v-show features: each time does not re-DOM delete and create operations, just switch the element's display:none style, there is a high initial rendering cost.

Use of v-if and v-show:

If the element involves frequent switching, it is best to use v-show instead of v-if, or v-if the element will probably never be displayed for the user to see.

1. In html code, such as the following code:

This is the element controlled by v-if, and this is the element controlled by v-show.

2. Define a flag in data, such as the following code:

data(){ return{ flag: false, } }

3. The effect diagram is as follows:

V. Summary

1. Using the style class in vue, there are three ways to pass an array, ternary expressions in arrays, use objects instead of ternary expressions, use v-bind objects for classes, object attributes are a class name, and attribute values are an identifier.

2. Style is used in vue. Style in vue is dynamically bound to style. Objects are collections that do not require key-value pairs. There are two ways to write key-value pair objects in data. Direct dynamic binding, multiple key-value pair objects, using array method, are written in turn.

3.vue-show essentially sets the label display to none to control hiding, vue-if dynamically adds or deletes DOM elements to the DOM tree.

4. Code is relatively simple, I hope to help you!

At this point, I believe everyone has a deeper understanding of "how to use style class in Vue", so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

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.