Comment lier les données dans la configuration en vue

Il existe trois façons de lier les données de configuration dans Vue : 1. refs : utilisez l'attribut ref pour lier les références d'éléments aux variables de configuration ; 2. v-model : liaison bidirectionnelle des valeurs des éléments d'entrée et des variables de configuration ; Attributs personnalisés : créez l'attribut et liez-le à la variable de configuration. Pour accéder à la valeur, utilisez this.attributeName.

Lier les données de configuration dans Vue

Dans Vue, utilisez la fonction setup() pour définir la logique et l'état des composants. Afin de lier ces données au modèle de composant, vous pouvez utiliser les méthodes suivantes : setup() 函数定义逻辑和组件状态。为了将这些数据绑定到组件模板，可以使用以下方法：

1. refs

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

示例：

<code class="vue"><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></code>

2. v-model

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

示例：

<code class="vue"><template>
  <input v-model="inputText" />
</template>

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

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

3. 自定义属性

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

1 refs

• Utilisez l'attribut ref pour lier les références d'un élément ou d'un composant. variable de configuration.

Pour accéder aux éléments ou composants liés, utilisez this.$refs.<ref-name>. 🎜🎜🎜Exemple : 🎜🎜

<code class="vue"><template>
  <div :my-value="myValue"></div>
</template>

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

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

🎜🎜2. v-model🎜🎜

• Utilisez la directive v-model pour lier les valeurs des éléments d'entrée aux variables dans la configuration. 🎜
• v-model liera les valeurs d'entrée et les variables de données dans deux directions. 🎜🎜🎜🎜Exemple : 🎜🎜

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

  🎜🎜3. Propriétés personnalisées🎜🎜
  • Créez des propriétés personnalisées et liez-les à des variables dans la configuration. 🎜
  • Pour accéder à la valeur liée, utilisez this.attributeName. 🎜🎜🎜🎜 Exemple : 🎜🎜rrreeerrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!