A tutorial on Vue style switching and Vue dynamic style usage

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