1
votes

Vue Js Ajout d'un nom de classe dynamique

je suis un débutant dans Vue JS. Je voulais ajouter un nom de classe, j'ai un tableau simple utilisant la boucle for et je veux ajouter un nom de classe lang- {ARRARY VALUE}

J'ai essayé peu de choses semblent ne pas fonctionner. j'apprécierais toute aide de la communauté

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>

    <title></title>

    <!-- BootStrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


    <!-- JQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>


<body>

<div id="app">
    {{ message }}

    <p v-for=" x in languages"  v-on:click="call(x)" :id="'obj-'x" style="border:1px solid black; padding: 10px;">
        {{x}}
    </p>

</div>


<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            languages:["Python", "c++"]
        },
        methods:{
            call:function (x) {
                alert("Hello "+ x);
            }
        }
    })
</script>
</body>
</html>

vue.js vue-component vuejs3

2 commentaires

Voulez-vous attribuer le nom de classe à la balise de paragraphe?

Oui, je veux attribuer un identifiant ou un nom de classe unique, comment puis-je faire cela

4 Réponses :

3
votes

C'est comme ça que tu fais

<p v-for="(x, index) in languages" :class="'lang-'+x" :key="index"  v-on:click="call(x)" style="border:1px solid black; padding: 10px;">{{x}}</p>

1 commentaires

Votre réponse est correcte, mais vous n'avez pas remarqué qu'un nom de classe comme lang-c++ n'est pas valide car + est un caractère réservé dans CSS qui sert à cibler l'élément frère adjacent, veuillez vérifier ceci

2
votes

:class="`lang-${x}`"

1 commentaires

1
votes

Je recommande d'utiliser une autre structure pour votre tableau de langues comme:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  {{ message }}

  <p v-for=" x in languages" :class="`lang-${x.value}`" v-on:click="call(x)" :id="'obj-'+x.value" style="border:1px solid black; padding: 10px;">
    {{x.label}}
  </p>

</div>

dans ce cas, la value propriété est utilisée comme id ou nom de class car un nom comme c++ n'est pas acceptable dans le nom de la classe, l'id ou tout autre attribut, et vous devez également changer :id="'obj-'x en :id="'obj-'+x.value

.lang-cpp {
  color: #4455ff
}

.lang-python {
  color: #44ff44
}

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    languages: [{
        value: 'python',
        label: 'Python'
      },
      {
        value: 'cpp',
        label: 'C++'
      }
    ]
  },
  methods: {
    call: function(x) {
      alert("Hello " + x.label);
    }
  }
})

    languages: [{
        value: 'python',
        label: 'Python'
      },
      {
        value: 'cpp',
        label: 'C++'
      }
    ]

0 commentaires

2
votes

Le moyen le plus simple de modifier les noms de classe dans le modèle est peut-être d'utiliser une méthode.

La méthode className() traduit les données avec des caractères CSS invalides en quelque chose qui peut être utilisé sur la feuille de style.

<!DOCTYPE html>
<html lang="en" dir="ltr">
    
<head>
    
  <title></title>
    
  <!-- BootStrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
            integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
    
    
  <!-- JQuery-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
  <!-- development version, includes helpful console warnings -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    
  <style>
    .lang-cpp { color: red }
  </style>
    
  <body>
    
    <div id="app">
      {{ message }}
    
      <p v-for=" x in languages" v-on:click="call(x)" :id="'obj-' + x" 
        :class="'lang-' + className(x)"
        style="border:1px solid black; padding: 10px;">
        {{x}}
      </p>
    
      </div>
    
      <script>
        var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue!',
          languages: ["Python", "c++"]
        },
        methods: {
          call: function (x) {
            alert("Hello " + x);
          },
          className: function (item) {
            return item === 'c++' ? 'cpp' : item;
          }
        },
      })
    </script>
  </body>
    
</html>

methods: {
  call: function (x) {
    alert("Hello " + x);
  },
  className: function (item) {
    return item === 'c++' ? 'cpp' : item;
  }
},

Démo

<p v-for=" x in languages" v-on:click="call(x)" 
  :id="'obj-' + x" 
  :class="'lang-' + className(x)"
  style="border:1px solid black; padding: 10px;">

0 commentaires