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

This article mainly explains "how to achieve class switching in vuejs". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "vuejs how to achieve class switching"!

Vuejs to achieve class switching methods: 1, create a html web page infrastructure; 2, introduce vue.js;3, initialize a vue instance; 4, bind an event @ click;5 to the button, create a class cgcolor;6 to switch colors, and use active to judge by binding calss.

This article operating environment: windows7 system, vue2.9.6 version, DELL G3 computer.

How does vuejs achieve class switching?

Vue implements switching class classes:

In the first step, in order to make it easier for us to write code, I will use the html editor sublime-text to write the code, as shown in the following figure

The second step is to create a html web page infrastructure, and then we want to use vue.js as a framework. We first introduce vue.js, which can be downloaded from the official website or refer to the online vue.js library, as shown below.

Third, after introducing vue.js, let's briefly talk about the effect of the example we are going to implement.

There is a black box, click the button to change the black box to blue, click on the box again, the box changes back to black, and then cycle. ) the detailed code is as follows

The details are as follows

Third, after the creation, we initialize a vue instance. The detailed code and effect are shown below.

Step 5, we bind an event @ click to the button, and then write the event method in methods, as shown in the figure below.

In the sixth step, we create a class cgcolor to switch colors, then create a new status tag active in data, and then use active to judge by binding calss, as shown below

Step 7, the final effect is as follows: click on the box to turn blue, and then click to turn black. The details are as follows

At this point, I believe you have a deeper understanding of "vuejs how to achieve class switching", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow 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.