Maison > Article > interface Web > Comment modifier un style de balise dans vue ?

Comment modifier un style de balise dans vue ?

亚连original: 2018-06-11 15:30:073526parcourir

Cet article présente principalement la méthode de modification dynamique du style d'une balise dans Vue. Maintenant, je le partage avec vous et le donne comme référence.

L'entreprise va réaliser un projet similaire à Toutiao. Elle utilisera la séparation front-end et back-end pour créer une page HTML5. Elle sera d'abord exécutée sur WeChat. l'effet. La navigation dans l'en-tête de Toutiao peut être défilée et des catégories ajoutées, et il en va de même pour notre projet. Par conséquent, lors de la navigation, vous devez cliquer sur différentes catégories, et le style changera également en conséquence. J'ai cherché sur Internet et j'ai trouvé le code suivant, qui est concis et clair. Cependant, j'ai oublié l'URL spécifique, je vais donc publier. Jetez d'abord le code pour tout le monde. Si vous souhaitez connaître l'URL, vous pouvez la rechercher en ligne.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .active{
      color: red;
    }
  </style>
</head>
<body>
  <p id="app">
    <button v-for=&#39;item in isp&#39; @click=&#39;f1($index)&#39; 
    :class="{&#39;active&#39;: $index === isActive}">{{item}}</button>
  </p>

  <script type="text/javascript" src=&#39;vue.js&#39;></script>
  <script>
    new Vue({
      el:&#39;#app&#39;,
      data:{
        isActive:0,
        isp: [&#39;BGP&#39;,&#39;中国电信&#39;,&#39;中国联通&#39;,&#39;联通电信双线&#39;]
      },
      methods:{
        f1:function(index){
          this.isActive=index
        }
      }
    })
  </script>
</body>
</html>

Comme ce qui suit :

vue modifie dynamiquement le style d'un tag.jpeg

Ce qui suit est le code dans mon projet :

Pour le code ci-dessus, l'auteur utilise vue version 1.0, et ci-dessous j'utilise la version 2.0.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .red-link{
      color: red;
    }
  </style>
</head>
<body>
  <p id="app">
    <a href="javascript:void (0);" rel="external nofollow" class="box1-item" 
       v-for="(item, index) in menu"
       :class="{ &#39;red-link&#39;:index === isActive }" 
       v-on:click.stop.prevent=&#39;switchTab(index)&#39;>
       {{ item }}
    </a>
  </p>

  <script type="text/javascript" src=&#39;vue.js&#39;></script>
  <script>
    new Vue({
      el:&#39;#app&#39;,
      data:{
        isActive:0,
        menu: [&#39;推荐&#39;, &#39;人物&#39;, &#39;干货&#39;, &#39;行业&#39;, &#39;融资&#39;,&#39;�教育&#39;,&#39;大数据&#39;],
      },
      methods:{
        switchTab: function (index) {
          this.isActive = index;
        }
      }
    })
  </script>
</body>
</html>

Le code est fondamentalement le même, je l'ai juste organisé moi-même pour qu'il soit plus facile à retrouver lorsque je l'utiliserai la prochaine fois. J'espère aussi que les amis qui en ont besoin pourront l'utiliser.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles Liés

Voir plus