Méthodes associées de paramètres de classe et de style dans vue

paramètres de style de classe et de style

classe

code html

<p id="box">
    <strong>阿斯顿发</strong>
</p>

code css

.red {
    color: red;
}
.gray {
    background-color: gray;
}

code js

window.onload = function() {
    new Vue({
        el: '#box',
        data: {
            red: 'red',
            gray: 'gray'
        }
    });
}

La façon d'écrire le style pour qu'il prenne effet

1. :class="[red, gray]" est d'appeler l'attribut data dans le paramètre vue

   <strong :class="[red, gray]"></strong>

2. :class="{red: true, gray: true}"

   <strong :class="{red: true, gray: true}"></strong>

   La deuxième méthode peut également appeler l'attribut data du paramètre vue. Rappelez-vous, tout dans Vue. is data

   new Vue({
       el: '#box',
       data: {
          red: 'red',
          gray: 'gray',
          a: true,
          b: false
    }   
   });

   <strong :class="{red: a, gray: b}"></strong>

3. :class="json", une version simplifiée de la deuxième méthode, la version officielle

   new Vue({
       el: '#box',
       data: {
           red: 'red',
           gray: 'gray',
           json: {
               a: true,
               b: false
           }
       }
   });

<strong :class="json"></strong>

style

est fondamentalement le même que la classe

1. :style="{}"

<strong :style="{color: &#39;red&#39;, backgroundColor: &#39;gray&#39;}"></strong>

1. :style="a"

   new Vue({
       el: '#box',
       data: {
           red: 'red',
           gray: 'gray',
           a: {
               color: 'red',
               backgroundColor: 'gray' //注意复合样式的书写规范
           }
       }
   });

   <strong :style="a">阿斯顿发</strong>

2. :style="[a, b]", a, b correspondent à Deux données json dans data

Pour plus de méthodes connexes de paramètres de classe et de style dans vue, veuillez faire attention au site Web PHP chinois pour les articles connexes !