Explication détaillée de la syntaxe d'interpolation Moustache et de l'instruction v-bind dans Vue

Cet article vous présentera la syntaxe d'interpolation Moustache et l'instruction v-bind dans Vue J'espère que cela pourra vous aider !

1. Syntaxe d'interpolation de moustache

⭐⭐syntaxe de moustache : Cela signifie "barbe", on dit que c'est parce que la balise intégrée ressemble à une moustache {{}} (je ne Je ne pense pas que cela ressemble à O( ∩_∩)Ohaha~)

Pour afficher des données dans un modèle, la syntaxe la plus couramment utilisée est la syntaxe "Moustache" (doubles accolades) interpolation de texte

• l'objet de données renvoyé est ajouté au système réactif d'In Vue ; (Partage de vidéos d'apprentissage : tutoriel vidéo Vue)
• Lorsque les données dans les données changent, le contenu correspondant sera également mis à jour.
• Mustache peut non seulement être des attributs dans les données, mais aussi une expression javascript

⭐⭐
que nous pouvons écrire:

• Value
• Expression
• ternary expression
• call des méthodes fonction

 <div id="app">
      <h2>{{message}}</h2>
      <h2>当前计数：{{counter}}</h2>

      <!-- 2.表达式 -->
      <h2>计数双倍：{{counter*2}}</h2>
      <h2>展示的信息:{{info.split(" ")}}</h2>

      <!-- 3.三元表达式 -->
      <h2>{{age>=18?"成年人" : "未成年人"}}</h2>

      <!-- 4.调用methods中函数 -->
      <h2>{{formatDate(time)}}</h2>
</div>

2. liaison attributs de v-bind

2.1. Attributs de base de la liaison v-bind

⭐⭐
Liaison unidirectionnelle v-bind : les données ne peuvent circuler que des données vers la page

   Nous pouvons utiliser v- bind pour lier des attributs, tels que la liaison dynamique de l'attribut href de l'élément a et de l'attribut src de l'élément img

  v-bind est utilisé pour

• lier une ou plusieurs valeurs d'attribut
• Passer la valeur des accessoires* * vers un autre composant (props : équivalent à l'entrée d'un composant, vous l'apprendrez plus tard)
  
  v-bind:href peut s'écrire comme : href C'est le sucre syntaxique de v-bind

<div id="app">
      <!-- 1.绑定img的src属性 -->
      <button @click="switchImage">切换图片</button>
      <img v-bind:src="showImgUrl" alt="" />
      <!--语法糖 v-bind: = :  -->
      <!-- 2.绑定a的href属性 -->
      <a v-bind:href="href">百度一下</a>
    </div>

2.2 Classe de liaison .v-bind

⭐⭐

1. Classe de liaison de base

<h2 :class="classes">Hello World</h2>

2. La classe dynamique peut écrire la syntaxe d'objet

<button :class="isActive ? &#39;active&#39;:&#39;&#39;" @click="btnClick">
我是按钮
</button>

3 Utilisation de base de la syntaxe d'objet

<button :class="{active:isActive}" @click="btnclick">我是按钮</button>

4. paires, les classes liées dynamiquement peuvent être utilisées en même temps que les classes ordinaires

• Nous pouvons donner à v-bind:class un objet pour changer dynamiquement de classe
• Bien sûr, v-bind:class peut également coexister avec les fonctionnalités de classe ordinaires

<button class="abc cba" :class="getDynamicClasses" @click="btnClick">
我是按钮
</button>

2.3.v-bind style de liaison

⭐⭐

1 Méthode d'écriture HTML ordinaire

<h2 style="color: aqua; font-size: 30px">hhh</h2>

2. Certaines valeurs du style proviennent des données

Style de liaison dynamique, suivi du type d'objet.

<h2 v-bind:style="{color:fontColor,fontSize:fontSize}">hhhh</h2>

3. Attribut de liaison dynamique, cet attribut est un objet

<h2 :style="objStyle">hhhhh</h2>

2.4.v-bind nom d'attribut de liaison

⭐⭐dans les données de liaison Nom d'attribut

Utiliser lorsque le nom de l'attribut n'est pas fixe : [nom de l'attribut ] = "value"

<div id="app">
      <h2 :[name]="aaaa">Hello World</h2>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return {
            name: "class",
          };
        },
      });
      app.mount("#app");

2.5.v-bind lie directement l'objet

⭐⭐Passez dans un objet, l'objet provient de données, Tous les attributs d'un objet, lié à tous les attributs de l'élément

<div id="app">
      <h2 :name="name" :age="age" :height="height">Hello world</h2>
      <--直接绑定一个对象，一步到位-->
      <h2 v-bind="infos"></h2>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data: function () {
          return {
            infos: { name: "kk", age: 18, height: 1.7 },
            name: "kk",
            age: 18,
            height: 1.7,
          };
        },
      });
      app.mount("#app");

[Tutoriels vidéo associés recommandés : Tutoriel d'introduction à vuejs, Introduction au front-end Web]

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!