A tutorial on Vue style switching and Vue dynamic style usage

Source: Internet
Author: User
This article will give you a description of the Vue style switch one-level vue dynamic style of the use of the tutorial, the following to bring you a few small cases, the need for friends can learn from the study.

Now that we've chosen Vue, don't think about manipulating the DOM when you're doing something, all of it to Vue to solve.

The following is a very simple but very common effect, probably everyone will use this demand


Navigation bar style Switch function, if we use jquery and other things to write, may have to write a lot of code, then we use Vue,

The code is as follows

Html

Attach the style and class binding API in Vue

<div id= "wrap" class= "box" >  <div v-for= "(list,index) in navlists" class= "NAV": class= "{red:changered = = Index} "@click =" Reds (index) >{{list.text}}</div></div>


Css

*{        padding:0;margin:0;      }      . box{        height:40px;        Background:cyan;      }      . nav{        line-height:40px;        Display:inline-block;        margin-left:100px;        Cursor:pointer;      }      . red{        color:red;      }//prerequisite is to introduce Vuejs Oh! var vm = new Vue ({      el: "#wrap",      data:{        navlists:[          {            "text": "Home"                    },          {            "text" : "Component"                    },          {            "text": "API"                     },          {            "text": "We"                    }        ],        changered:0      },      methods:{        reds:function (index) {          this.changered = index;        }      }    );


Take a closer look at our JS code in addition to the simulation of the data in fact there is only a simple logical processing, compared to the previous operation of the DOM saved a lot of things.

Ps:vue Solutions for dynamic styles

: class= "{active:isactive}"


There's nothing to say about it, but it's wrong when the class name has '-'

There is also a

Class= "[LineStyle (Courseclick)]"    LineStyle (isclick) {        if (isclick===true) {          return ' tab-items-current '        }else {          return ' Class-tab-items '        }      }


Believe that you have seen these cases you have mastered the method, more wonderful please pay attention to the PHP Chinese network other related articles!

Related reading:

The simplest string matching algorithm in PHP, PHP matching algorithm _php tutorial

The simplest tutorial for string matching algorithms in PHP

How PHP implements the stack data structure and the code example of the brace matching algorithm

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.