Bagaimana untuk mengikat data dalam persediaan dalam vue

Terdapat tiga cara untuk mengikat data Persediaan dalam Vue: 1. rujukan: gunakan atribut ref untuk mengikat rujukan elemen kepada pembolehubah persediaan; . Atribut tersuai: Buat atribut dan ikat pada pembolehubah persediaan Untuk mengakses nilai gunakan this.attributeName.

Ikat data Persediaan dalam Vue

Dalam Vue, gunakan fungsi setup() untuk menentukan logik dan keadaan komponen. Untuk mengikat data ini pada templat komponen, anda boleh menggunakan kaedah berikut: setup() 函数定义逻辑和组件状态。为了将这些数据绑定到组件模板，可以使用以下方法：

1. refs

• 使用 ref 属性将元素或组件引用绑定到 setup 中的变量。
• 访问绑定的元素或组件，使用 this.$refs.<ref-name>。

示例：

<template>
  <input ref="myInput" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const inputRef = ref(null);
    return { inputRef };
  },
  mounted() {
    console.log(this.$refs.myInput.value);
  }
};
</script>

2. v-model

• 使用 v-model 指令绑定输入元素值到 setup 中的变量。
• v-model 将双向绑定输入值和数据变量。

示例：

<template>
  <input v-model="inputText" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const inputText = ref('');
    return { inputText };
  }
};
</script>

3. 自定义属性

• 创建自定义属性并将其绑定到 setup 中的变量。
• 访问绑定的值，使用 this.attributeName

1 rujukan

• Gunakan atribut ref untuk mengikat rujukan elemen atau komponen kepada. pembolehubah persediaan.
• Untuk mengakses elemen atau komponen terikat, gunakan this.$refs.<ref-name>.
  🎜🎜🎜Contoh: 🎜🎜

  <template>
    <div :my-value="myValue"></div>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    setup() {
      const myValue = ref('');
      return { myValue };
    }
  };
  </script>

  🎜🎜2. v-model🎜🎜
  • Gunakan arahan v-model untuk mengikat nilai elemen input kepada pembolehubah dalam persediaan. 🎜
  • v-model akan mengikat nilai input dan pembolehubah data dalam dua arah. 🎜🎜🎜🎜Contoh: 🎜🎜

    <code>console.log(this.myValue); // 输出从setup绑定的值</code>

    🎜🎜3. Sifat tersuai🎜🎜
    • Buat sifat tersuai dan mengikatnya pada pembolehubah dalam persediaan. 🎜
    • Untuk mengakses nilai terikat, gunakan this.attributeName. 🎜🎜🎜🎜Contoh: 🎜🎜rrreeerrreee

    Atas ialah kandungan terperinci Bagaimana untuk mengikat data dalam persediaan dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!