SoFunction
Updated on 2025-04-06

Example of vuejs click class change

Example of vuejs click class change

Updated: September 5, 2018 13:29:34 Author: luckyfen
Today, the editor will share with you an example of the change of vuejs click class, which has good reference value and hope it will be helpful to everyone. Let's take a look with the editor

As shown below:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Smalldemo</title>
 <style>
 .static{
 width: 100px;
 height: 60px;
 margin:30px auto;
 display: inline-block;
 cursor: pointer;
 }
 .class-a{
  background: lightpink;
 }
 .class-b{
  background: #eee;
 }
 </style>
</head>
<body> 
<div >
  <span class="static" v-bind:class="{'class-a':isA,'class-b':!isA}" @click="toggle"></span>
</div>
</body>
<script src="/vue/2.2.6/"></script>
<script>
var vm=new Vue({
  el:"#content",
  data:function(){
    return {
      isA:false
    };
  },
  methods:{
    toggle:function(){
      =!;
    }
  }
});
 
</script>
</html>

The above example of the change of vuejs click class is all the content I share with you. I hope you can give you a reference and I hope you can support me more.

  • vuejs
  • class

Related Articles

  • vue-cli create project ERROR in Conflict: Multiple assets emit dif

    Recently, an error occurred after vue/cli created a project. The following article mainly introduces to you the solution to the problem of vue-cli created project ERROR in Conflict: Multiple assets emit different content to the same filename . Friends who need it can refer to it.
    2023-02-02

  • Why is it not recommended to use index as key in Vue?

    Vue uses virtual dom and compares the old and new DOMs according to the diff algorithm to update the real dom. Key is the unique identifier of virtual DOM objects. Key plays an extremely important role in diff algorithm. The following article mainly introduces the relevant information about why index is not recommended to use keys in Vue. Friends who need it can refer to it.
    2022-09-09

  • How to convert the number returned in the background into the corresponding text

    This article mainly introduces how vue converts the numbers returned in the background into the corresponding text, which has good reference value and hopes to be helpful to everyone. If there are any mistakes or no complete considerations, I hope you will be very grateful for your advice
    2022-10-10

  • Summary of problems encountered during use of Element-plus

    The table data is data obtained by websocket communication. 20 pieces of data are obtained for the first time. In the future, a new subscription is added to obtain one. The new one is added to slide up to display the latest data. This article introduces a summary of the problems encountered in the use of Element-plus. Interested friends, follow the editor to take a look.
    2024-04-04

  • Solve the problem of clicking the menu again in vue without refreshing

    When the menu in elementUI is opened, click again and will not refresh. The fundamental reason why the menu is clicked again and will not refresh. After the page is opened, the same page will not refresh. This should be the framework mechanism. The editor has compiled two relatively good solutions. Friends who need it can refer to it.
    2023-08-08

  • Permission control issues based on vue, vue-router, vuex and addRoutes

    This article mainly introduces the issue of permission control based on vue, vue-router, vuex and addRoutes. Friends who need it can refer to it
    2018-05-05

  • How to write vue plugin using vue-cli

    This article mainly introduces the method of writing vue plug-ins using vue-cli. The editor thinks it is quite good. I will share it with you now and give you a reference. Let's take a look with the editor
    2018-02-02

  • The problem of flashing in Vue page refresh on a single page and solving

    This article mainly introduces the flickering problem and solutions for single page Vue page refresh, which is of good reference value and hopes to be helpful to everyone. If there are any mistakes or no complete considerations, I hope you will be very grateful for your advice
    2022-07-07

  • Vue implements custom drop-down menu function

    This article mainly introduces the function of Vue to implement the custom drop-down menu. The article first introduces it to you through the example code. Later, when you are looking for the knowledge points you use, you can refer to it if you need it.
    2018-07-07

  • Detailed explanation of Vue dynamic components and keep-alive component instances

    Dynamic components refer to the display and hiding of dynamic switching components. The following article mainly introduces relevant information about Vue dynamic components and keep-alive components. The article introduces the example code in detail. Friends who need it can refer to it.
    2022-05-05

Latest Comments