Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Apakah beberapa kaedah pengikatan data vue?

Apakah beberapa kaedah pengikatan data vue?

青灯夜游
青灯夜游asal
2021-12-27 14:16:154143semak imbas

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.

Apakah beberapa kaedah pengikatan data vue?

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>

Apakah beberapa kaedah pengikatan data vue?

2 Gunakan arahan vue
<template>

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

Apakah beberapa kaedah pengikatan data vue?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>

Apakah beberapa kaedah pengikatan data vue?


Apakah beberapa kaedah pengikatan data vue?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>

Apakah beberapa kaedah pengikatan data vue?

[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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn