Tutoriel sur le changement de style de vue et l'utilisation des styles dynamiques de vue

Cet article vous présentera le tutoriel sur l'utilisation du changement de style de vue et du style dynamique de vue de premier niveau. Voici quelques petits cas pour vous. Les amis dans le besoin peuvent en tirer des leçons.

Depuis que nous avons choisi vue, nous n'avons pas besoin de penser à faire fonctionner le dom lors de la création des choses, laissez tout à vue.

Ce qui suit est un effet très simple mais très courant, qui peut être utilisé par tout le monde

Fonction de changement de style de barre de navigation, si nous utilisons quelque chose comme jquery pour écrire, nous devrons peut-être écrire beaucoup de code, puis nous utilisons vue,

Le code est le suivant

html

Ci-joint le style vue et API de liaison de classe

<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 Regardez notre code js, en plus des données simulées, il n'a en fait qu'un simple traitement logique, ce qui permet d'économiser beaucoup de choses par rapport aux différentes opérations précédentes sur dom.

*{
        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;
        }
      }
    });

ps : solution de style dynamique vue

Il n'y a rien à dire à ce sujet, mais quand le nom de la classe a un signe '-' Signaler une erreur,

Il y en a une autre

:class="{active: isActive}"

Je crois que vous maîtrisez la méthode après avoir lu ces cas. Pour des choses plus excitantes, veuillez payer. attention aux autres sites Web chinois php Articles connexes !

Lecture connexe :

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

L'algorithme de correspondance de chaînes le plus simple en php, tutoriel php matching algorithm_PHP

Le didacticiel d'algorithme de correspondance de chaînes chinoises php le plus simple

Comment implémenter la structure de données de pile en PHP et exemples de code de l'algorithme de correspondance entre parenthèses

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!