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.