Apakah data mengikat yang vue gunakan?

Cara mengikat data dengan vue: 1. Gunakan kurungan kerinting berganda "{{}}" untuk memberikan data ke halaman 2. Gunakan arahan vue, arahan v-bind boleh mencapai data sehala mengikat, arahan v -model boleh merealisasikan pengikatan data dua hala 3. Gunakan ":", cuma tambah ":" sebelum atribut label untuk mengikat 4. Gunakan "${}", cuma sambungkan rentetan sebelum Penggunaan data; "${}".

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Beberapa cara untuk mengikat data dengan Vue

1 pendakap '{{}}' memberikan data kepada halaman

<template>

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

2. Gunakan arahan vue

<template>

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

V-model digunakan di sini untuk mengikat nilai kotak input kepada msg Ia juga boleh menjadi v-text v-html v-bind, dsb.

1 Pengikatan data sehala (v-bind): data hanya boleh mengalir dari data kembali ke halaman (pemindahan sehala)

2 pengikatan data -way (v -model): Data bukan sahaja boleh mengalir dari data ke halaman, tetapi juga dari halaman ke data

(1) Pengikatan data dua hala biasanya digunakan untuk membentuk elemen (seperti: input pilih kotak semak, dsb.)

(2) v-model: nilai boleh disingkatkan sebagai v-model kerana v-model mengumpul nilai secara lalai

3. Tambah ' sebelum atribut label: ' Ikat

<template>

  <div>
    <cellgroup>
      <cell></cell>
    </cellgroup>

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

melalui: tajuk untuk mengikat nilai msg pada tajuk sel sel. Jika anda terlupa untuk menambah ':' di hadapan atribut tajuk , paparan halaman akan menjadi seperti ini:

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

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

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

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

tutorial video vuejs, pembangunan bahagian hadapan web】

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