Comment passer une valeur booléenne directement dans vue

Vue est un framework JavaScript populaire pour créer des applications Web interactives et modernes. Vue est facile à apprendre, efficace et flexible, permettant aux développeurs de créer rapidement des applications monopage hautes performances. Cet article présentera comment Vue transmet directement les valeurs booléennes.

Dans le composant Vue, nous pouvons recevoir les données transmises via l'attribut props du composant. Dans le composant parent, nous pouvons transmettre des données au composant enfant via la directive v-bind. Normalement, la façon dont nous transmettons les valeurs de type booléen aux sous-composants est la suivante :

<template>
  <div>
    <child-component :is-true="true"></child-component>
  </div>
</template>

L'instruction v-bind est utilisée ici pour transmettre la valeur au sous-composant, et le sous-composant peut recevoir cette valeur via des accessoires :

Vue.component('child-component', {
  props: ['isTrue'],
  template: '<div>{{ isTrue }}</div>'
});

In Dans cet exemple, nous transmettons explicitement une valeur booléenne au sous-composant, et le sous-composant peut effectuer le traitement correspondant en fonction de cette valeur.

Cependant, dans certains cas, nous pouvons vouloir transmettre une expression directement au composant enfant, et le résultat de cette expression est une valeur booléenne. Par exemple :

<template>
  <div>
    <child-component :is-true="foo === &#39;bar&#39;"></child-component>
  </div>
</template>

Dans cet exemple, nous espérons déterminer si la valeur de la variable foo est égale à « bar », et si c'est le cas, transmettre true au composant enfant. Cependant, dans Vue, cette façon d'écrire n'est pas prise en charge. S'il est écrit comme ci-dessus, le composant enfant recevra une chaîne 'foo === 'bar' au lieu d'une valeur booléenne.

Une façon de résoudre ce problème consiste à utiliser des propriétés calculées dans le composant parent :

<template>
  <div>
    <child-component :is-true="isFooBar"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      foo: 'bar'
    };
  },
  computed: {
    isFooBar() {
      return this.foo === 'bar';
    }
  }
};
</script>

Dans cet exemple, nous définissons une propriété calculée isFooBar, qui détermine si elle est égale à "bar" en fonction de la valeur de foo, Si donc, il renvoie vrai, sinon il renvoie faux. Ensuite, nous transmettons cette propriété calculée au composant enfant dans le modèle, et le composant enfant peut recevoir une valeur booléenne.

Bien que cette approche puisse résoudre le problème, elle ajoute du code supplémentaire et n'est peut-être pas la solution la plus simple. Heureusement, Vue offre un moyen plus simple de transmettre directement des valeurs booléennes. Il suffit d'ajouter l'opérateur unaire + avant l'expression booléenne pour la contraindre en une valeur booléenne :

<template>
  <div>
    <child-component :is-true="+foo === +bar"></child-component>
  </div>
</template>

Dans cet exemple, nous utilisons l'opérateur unaire + pour contraindre foo et bar en types numériques, puis comparer. Le résultat de la comparaison sera une valeur booléenne, qui pourra être transmise directement au sous-composant, et le sous-composant pourra recevoir une valeur booléenne.

Pour résumer, les valeurs booléennes peuvent être passées directement dans Vue, mais il faut noter que si on passe une expression, il faut utiliser l'opérateur unaire + pour la forcer à une valeur booléenne. De cette façon, nous pouvons exploiter plus facilement les données de type booléen dans Vue.

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!