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

This article mainly introduces "what is the method of vue conditional rendering of v-if and v-show". In the daily operation, I believe that many people have doubts about the method of vue conditional rendering of v-if and v-show. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "what is the method of vue conditional rendering of v-if and v-show?" Next, please follow the editor to study!

1 、 v-if

In the template, you can render according to the conditions. The condition is implemented by the combination of v-if, v-else-if and v-else.

The sample code is as follows:

Go to the park today!

Let's go to the cinema today!

I'm not going anywhere today!

Let vm = new Vue ({el: "# app", data: {weather: 'sun'}}); 2. Use v-if on the

Sometimes we want to load multiple html elements in a condition, so we can do this on the template element.

The sample code is as follows:

What's the score in math?

What's the score in English?

Married?

Did you take the graduate entrance examination?

Did you get a raise?

How much is the salary?

Let vm = new Vue ({el: "# app", data: {age: 24}}); 3. Manage reusable elements with key

In addition, in the template, Vue will try to reuse existing elements rather than re-render, which can become more efficient.

If we allow users to switch between different login methods:

User name: Email switch login type const app = new Vue ({el: "# app", data: {loginType: "username"}, methods: {changeLoginType () {/ / if the type is username, switch to email, otherwise this.loginType= this.loginType=== "username"? "email": "username";})

Next, let's take a look at the following image:

There will be a problem in this, that is, if I enter the information in the input box of username and switch to the mailbox, the previous information is still retained, which certainly does not meet the requirements. If we want to re-render the html element every time we switch, we can add a unique key attribute to the element that needs to be re-rendered. The key attribute is recommended to use shaping and string type.

The sample code is as follows:

User name: Email toggles login type

We can see that when the 123 entered by the user name was switched to the mailbox, the 123 in the input box was missing.

Note: elements are still reused efficiently because they do not add key attributes.

4 、 v-show

Another option for displaying elements based on conditions is the v-show directive. The usage is roughly the same:

Hello!

The difference is that elements with v-show are always rendered and retained in DOM. V-show simply switches the CSS property display of the element.

Note: v-show does not support elements and does not support v-else.

4.1 v-if vs. v-show

V-if is a "real" conditional rendering because it ensures that event listeners and subcomponents within the conditional block are properly destroyed and rebuilt during switching.

V-if is also lazy: if the condition is false at the initial rendering, nothing is done-- the conditional block does not start to be rendered until the condition becomes true for the first time.

V-show, by contrast, is much simpler-elements are always rendered regardless of the initial conditions, and are simply switched based on CSS.

In general, v-if has higher switching overhead, while v-show has higher initial rendering overhead. Therefore, it is better to use v-show if you need to switch very frequently, or v-if if the conditions rarely change at run time.

At this point, the study on "what is the method of vue conditional rendering v-if and v-show" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.