How to switch between styles in vue

This article mainly introduces how to switch between styles in vue and how to implement dynamic styles in vue. This article introduces you to it in great detail and has reference value. Friends who need it can refer to it

Preface

Since we have chosen vue, we should not think about operating the dom when making things, leave everything to vue.

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

Please see the picture below

The style switching function of the navigation bar, 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 the style and class binding API in vue

<p id="wrap" class="box">
  <p v-for="(list,index) in navLists" class="nav" :class="{ red:changeRed == index}" @click="reds(index)">{{list.text}}</p>
</p>

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 js code. In addition to the simulated data, it actually only has a simple logical processing. Compared with the previous various dom operations, it saves a lot of trouble.

ps: vue dynamic style solution

:class="{active: isActive}"

There is nothing to say about this, but there is a '-' sign in the class name Sometimes I report errors,

There is another one

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

The above is what I compiled for everyone, I hope it will be helpful to everyone in the future.

Related articles:

How to implement automatic numerical increment in JavaScript

How to use Redux in React projects (detailed tutorial)

How to implement random layout waterfall flow in ionic3

How to implement the return to top effect in JS

The above is the detailed content of How to switch between styles in vue. For more information, please follow other related articles on the PHP Chinese website!