Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to switch tabs with vue.js

2025-02-23 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article mainly explains "how to switch tabs in vue.js". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to switch tabs with vue.js.

First, the realization principle

I use the click event to change the value of the data data, and the v-if instruction shows / hides the content according to the change of the data.

1. Set a content array to store the Boolean values of whether the contents of the six options are displayed. By default, the first one is displayed.

New Vue ({el: ".body", data: {avision 123, content: [true,false,false,false,false,false]}})

2. Use the v-if instruction in the option content

User center content management message push data statistics operation background management account, permissions

3. Write a click event in methods. According to the parameters of the event, set the content value of the corresponding location to true, and the rest to false.

If you encounter an error here, the direct assignment will be invalid, because the array in data cannot change the data in the array directly through the subscript, but through the this.$set (this.arr,index,newVal); method, or assign the new array directly.

New Vue ({el: ".body", data: {content 123, content: [true,false,false,false,false,false]}, methods: {switchItem:function (item) {console.log (body) for (let I = 0; I)

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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report