How to use Vue to make a slide label

This article will give you a detailed explanation about how to use Vue to make a slide label, Xiaobian feels very practical, so share it to everyone to do a reference, I hope everyone can gain something after reading this article.

Why use Vue

VUE is a friendly, multi-purpose and high-performance JavaScript framework, using Vue to create a compatibility and tonable code base, VUE Allows a web page to be divided into a reused component, each component contains its own HTML, CSS, JavaScript to render the corresponding places in the web page, so more and more front-end developers use VUE.

Vue makes the specific code of the sliding label, the specific content is as follows

Step 1: Write an HTML structure

Write one you need to show Static effect, then change it to VUE to dynamically generate, code is as follows:

  Tag 1 
Content 2

Step 2:
Write a CSS style

Write a style for your structure, the code is as follows:
* {margin: 0; padding: 0; border-style: none;} UL , ol {list-style: none;} a {text-decoration: none; color: # 777;} body {font:Normal 14PX / 1.6 Helvetica, "Microsoft Yahei"; Color: # 777; Background-Color: # f5f5f5;} .wrap {width: 600px; margin: 20px auto 0;} .tabs {Overflow: Auto;} .tabs li { FLOAT: LEFT;} .tabs li a {display: block; padding: 10px 15px; color: #bbb;} .tabs li.active {background-color: #fff;} .tabs li.active a {color: # 333 ;} .TABS-Con {Padding: 15px; Background-Color: #fff;}
Step 3:

Write an JS code This step is the key, and the content of Vue is used

VAR App1 = New Vue ({EL: ‘# app1’, Data: {// Label list Data, is an array, the number of items is the object format Tabs: [{name: ‘Tag 1’}, {name: ‘Tag 2’}, {Name: ‘Tag 3’}], Num: 0}, // Method, Build a custom function, Click Time OnClick Methods: {TabSswitch (INDEX) {// Use the THIS, indicating the object Num this.num = index;}}})
 using the above constructor app1    Step 4: Change the upper HTML structure 

{Tab.Name}}

   

Content 3

  
    About "How to Use VUE Make Slide Label" This article is shared here, I hope that the above can help everyone, so that you can learn more knowledge. If you think that the article is good, please It shares out to let more people see.
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment