Tutorial on switching vue styles and using vue dynamic styles

This article will introduce to you the tutorial on how to use vue's style switching and the first-level vue's dynamic style. Here are a few small cases for you. Friends in need can learn from it.

Since we chose vue, don’t think about operating the dom when making things, leave everything to vue.

Let’s talk about a very simple but very common effect. Maybe everyone will use this requirement

Navigation bar style switching Function, if we use something like jquery to write, we may have to write a lot of code, then we use vue,

The code is as follows

html

Attached is vue Style and class binding API

<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;
      }
 
//前提是必须引入vuejs哦！
var vm = new Vue({
      el:"#wrap",
      data:{
        navLists:[
          {
            "text":"首页"          
          },
          {
            "text":"组件"          
          },
          {
            "text":"API"           
          },
          {
            "text":"我们"          
          }
        ],
        changeRed:0
      },
      methods:{
        reds:function(index){
          this.changeRed = index;
        }
      }
    });

Take a closer look at our In addition to the simulated data, the js code actually only has a simple logical processing, which saves a lot of trouble compared to the previous various operations on the dom.

ps: vue dynamic style solution

:class="{active: isActive}"

There is nothing to say about this, but an error is reported when the class name has a '-' sign ,

There is another

class="[lineStyle(courseClick)]"
    lineStyle(isClick){
        if (isClick===true){
          return 'tab-items-current'
        }else {
          return 'class-tab-items'
        }
      }

#I believe you have mastered the method after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

The simplest string matching algorithm in php, php matching algorithm_PHP tutorial

The simplest php Medium String Matching Algorithm Tutorial

#php How to implement the stack data structure and code examples of the bracket matching algorithm

The above is the detailed content of Tutorial on switching vue styles and using vue dynamic styles. For more information, please follow other related articles on the PHP Chinese website!