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

This article mainly shows you "vue how to achieve tabs", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to achieve tabs in vue" this article.

The details are as follows

Implementation steps

Achieve static UI effect

Implement the tag structure and style in the traditional way

Reconstruct UI effect based on data

Refactoring static structures and styles into forms based on Vue template syntax

Handle event binding and js control logic

Declarative programming

The structure of the template is basically the same as the final display effect.

Let's first store each set of data as objects in an array.

List: [{id: 1, title: 'apple', path:' images/ Apple .jpg'}, {id: 2, title: 'orange', path:' images/ Orange .jpg'}, {id: 3, title: 'lemon', path:' images/ Lemon .jpg'}]

Then the array is traversed through v-for to get the corresponding title value

{{item.title}}

Traverse the picture as well.

The specific code is as follows

Document .tab ul {overflow: hidden; padding: 0; margin: 0;} .tab ul li {box-sizing: border-box; padding: 0; float: left; width: 100px; height: 45px; line-height: 45px List-style: none; text-align: center; border-top: 1px solid blue; border-right: 1px solid blue; border-bottom: 1px solid blue; cursor: pointer;} .tab ul li:first-child {border-left: 1px solid blue } .tab ul li.active {background-color: orange;} .tab div {width: 500px; height: 300px; display: none; text-align: center; font-style: 30px; line-height: 300px; border: 1px solid blue Border-top: 0px;} .tab div.current {margin-top: 0px; width: 300px; height: 300px; display: block;} img {width: 300px; height: 300px } {{item.title}}

Var vm = new Vue ({el:'# app', / * data * / data: {currentIndex: 0, / * current index * / list: [{id: 1, title: 'apple' Path: 'images/ Apple .jpg'}, {id: 2, title: 'orange', path:' images/ Orange .jpg'}, {id: 3, title: 'lemon' Path: 'images/ lemon. Jpg'}]}, / * js control logic * / methods: {/ / realize the tab switching operation here: essentially the operation class name / / how to operate the class name? Through currentIndex change: function (index) {this.currentIndex = index}) the above is all the content of the article "how to implement the vue Tab". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.