Apakah beberapa kaedah pengikatan data vue?

Kaedah pengikatan data Vue: 1. Gunakan kurungan kerinting berganda "{{}}" untuk memberikan data kepada halaman; 2. Gunakan "v-model", "v-text", "v-html" ", "v-bind" dan arahan lain; 3. Tambahkan ":" sebelum atribut label untuk mengikat; 4. Gunakan "${}" sebelum data untuk menyambung rentetan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Beberapa cara untuk mengikat data dengan Vue

1 Gunakan pendakap berganda '{<strong><span style="font-size: 16px;">{}}</span></strong>{}}

' Berikan data ke halaman

<template>

  <div class="mainBody">
      <h3>{{ msg }}</h3>
  </div>
</template>
<script>
export default {
   data(){
     return{
       msg:&#39;月落乌啼霜满天&#39;,
     }
}
}
</script>

2 Gunakan arahan vue

<template>

  <div class="mainBody">
       <Input v-model="msg"/>
  </div>
</template>
<script>
export default {
   data(){
     return{
       msg:&#39;月落乌啼霜满天&#39;
     }
}
}
</script>

V-model digunakan di sini untuk membandingkan nilai kotak input dengan msg Binding juga boleh menjadi v-text v-html v-bind, dsb.

3. Tambah ':' sebelum atribut label untuk diikat

<template>

  <div class="mainBody">
    <CellGroup>
      <Cell :title="msg"/>
    </CellGroup>

  </div>
</template>
<script>
export default {
   data(){
     return{
       msg:&#39;月落乌啼霜满天&#39;,
     }
}
}
</script>

：
Ikat nilai msg pada tajuk sel sel melalui:title, jika anda terlupa menambah '
' di hadapan atribut tajuk , paparan halaman akan menjadi seperti ini:

Nilai yang diberikan kepada tajuk bukanlah msg pembolehubah dalam data() tetapi rentetan "msg"

4. Gunakan `${}` untuk menyambung rentetan sebelum data

<template>
<!-- 有时我们需要给要绑定的值拼接字符串，比如需要控制样式，拼接字符串时，那我们就需要这样写`${}`， -->
  <div class="mainBody">
    <CellGroup>
      <Cell :title="msg"/>
       <!-- 将‘江枫渔火对愁眠’单元格 的背景色绑定到 color:&#39;aqua&#39; -->
      <Cell title=&#39;江枫渔火对愁眠&#39; :style="`background-color: ${color}`"/>
       <!-- 将‘江枫渔火对愁眠’拼接在msg：&#39;月落乌啼霜满天&#39;后-->
      <Cell :title="`${msg}，江枫渔火对愁眠`" />
    </CellGroup>

  </div>
</template>
<script>
export default {
   data(){
     return{
       msg:&#39;月落乌啼霜满天&#39;,
       color:&#39;aqua&#39;
     }
}
}
</script>

[Cadangan berkaitan: "Tutorial vue.js》]

Atas ialah kandungan terperinci Apakah beberapa kaedah pengikatan data vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!