Penjelasan terperinci tentang sintaks interpolasi Misai dan arahan v-bind dalam Vue

Artikel ini akan memperkenalkan kepada anda sintaks interpolasi Misai dan arahan v-bind dalam Vue saya harap ia dapat membantu anda!

1. Sintaks interpolasi misai

⭐⭐sintaks misai: Ia bermaksud "janggut", Ia dikatakan bahawa ia adalah kerana teg terbenam kelihatan seperti janggut {{}} (saya tidak fikir ia kelihatan seperti O(∩_∩)O haha~)

Paparkan data dalam templat (template), yang paling banyak digunakan Sintaks ialah sintaks "Mustache" (kurung kurung berganda) interpolasi teks

• data Objek yang dikembalikan ditambahkan pada sistem responsif Vue; Mempelajari perkongsian video: tutorial video vue)
• Apabila data dalam data berubah, kandungan yang sepadan juga akan dikemas kini.
• Mustache bukan sahaja boleh menjadi atribut dalam data, tetapi juga ungkapan JavaScript

⭐⭐
Kita boleh menulis:

• Nilai
• Ungkapan
• Ungkapan Ternary
• Panggil fungsi dalam kaedah

 <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. v- Sifat mengikat ikatan

2.1. Sifat asas pengikatan v-v

⭐⭐
V-bind pengikatan sehala : Data hanya boleh mengalir daripada data ke halaman

 Kita boleh menggunakan v-bind untuk mengikat atribut, seperti mengikat secara dinamik atribut href bagi elemen a dan atribut src bagi elemen img

v-bind digunakan untuk

• mengikat satu atau lebih nilai sifat
• menyalurkan nilai prop kepada komponen lain** (props: bersamaan dengan input komponen , anda akan mempelajarinya kemudian)
  
  v-bind:href boleh ditulis sebagai: href Ini adalah gula sintaksis 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 .v- kelas mengikat mengikat

⭐⭐

1 kelas mengikat asas

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

2 >

3. Penggunaan asas sintaks objek

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

4. Pasangan nilai kunci berbilang sintaks objek, kelas terikat secara dinamik boleh digunakan pada masa yang sama dengan kelas biasa

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

Kita boleh memberikan v-bind:class objek untuk menukar kelas secara dinamik

• Sudah tentu, v-bind:class juga boleh wujud bersama dengan ciri kelas biasa

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

2.3.Gaya ikatan v-bind

⭐⭐

1. Penulisan html biasa

2 daripada

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

gaya pengikatan dinamik dalam data, diikuti dengan jenis objek

3. Atribut pengikatan dinamik, atribut ini ialah objek

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

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

2.4 .v-bind nama atribut mengikat

⭐⭐Ikat nama atribut dalam data

Apabila nama atribut tidak tetap Gunakan: [property name] = "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 terus mengikat objek

⭐⭐Melalui objek, objek datang daripada data, semua atribut objek, terikat kepada semua atribut pada elemen

[Tutorial video berkaitan yang disyorkan:

<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");

Tutorial Bermula Vuejs

, Bermula Bahagian Depan Web 】

Atas ialah kandungan terperinci Penjelasan terperinci tentang sintaks interpolasi Misai dan arahan v-bind dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!