Quelles données de liaison vue utilise-t-il ?

Comment lier des données avec vue : 1. Utilisez des doubles accolades "{{}}" pour donner des données à la page ; 2. Utilisez les instructions vue. L'instruction v-bind peut réaliser une liaison de données unidirectionnelle, et le v-. l'instruction de modèle peut réaliser une liaison de données bidirectionnelle ; 3. Utilisez " : ", ajoutez simplement " " avant l'attribut d'étiquette pour la liaison ; données }".

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Plusieurs façons de lier des données avec Vue

1. Utilisez des doubles accolades '{{}}' pour donner des données à la page

<template>

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

2. Utilisez la commande vue

<template>

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

Ici, nous utilisons v-model pour lier la valeur de la zone de saisie à msg, ou v-text v-html v-bind, etc.

1. liaison définie (v-bind) : les données ne peuvent circuler que des données vers la page (transfert unidirectionnel)

2. Liaison de données bidirectionnelle (v-model) : les données peuvent non seulement circuler des données vers la page, mais également de la page aux données

(1) La liaison de données bidirectionnelle est généralement appliquée aux éléments de formulaire (tels que la case à cocher de sélection d'entrée, etc.)

(2) v-model:value peut être abrégé en v-model car v -model collecte la valeur par défaut

3. Ajoutez ':' devant l'attribut label pour lier

<template>

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

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

Liez la valeur de msg au titre de la cellule via:title Si vous. oubliez d'ajouter ':' devant l'attribut title, la page L'affichage deviendra comme ceci :

La valeur donnée à title n'est pas la variable msg dans data() mais la chaîne "msg"

4. Utilisez `${ pour épisser les chaînes avant les données }`

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

【Recommandations associées : tutoriel vidéo vuejs, développement web front-end】

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!