Quelles sont les différentes méthodes de liaison de données vue ?

Méthode de liaison de données Vue : 1. Utilisez des doubles accolades "{{}}" pour donner des données à la page ; 2. Utilisez "v-model", "v-text", "v-html", "v - bind" et d'autres instructions ; 3. Ajoutez  : : avant l'attribut d'étiquette à lier ; 4. Utilisez "${}" avant les données pour épisser la chaîne.

L'environnement d'exploitation de ce tutoriel : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

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

1. Utilisez des doubles accolades '{{<strong><span style="font-size: 16px;">{}}</span></strong>’ 把数据给到页面

<template>

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

二、使用vue指令

<template>

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

这边使用的是 v-model 将输入框的值与msg绑定 ，还可以是v-text v-html v-bind等

三、标签属性前加 ‘ ：’ 绑定

<template>

  <div class="mainBody">
    <CellGroup>
      <Cell :title="msg"/>
    </CellGroup>

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

通过:title 将msg的值绑定到cell单元格的title，如果title属性前面忘记加‘ ：
<img src="https://img.php.cn/upload/article/000/000/024/f2d23f70b75808296b393e6baab11700-Quelles%20sont%20les%20diff%C3%A9rentes%20m%C3%A9thodes%20de%20liaison%20de%20donn%C3%A9es%20vue%C2%A0?" alt="Quelles sont les différentes méthodes de liaison de données vue ?"><br>{}}

' Donnez les données à la page

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

2. Utilisez la commande vue

🎜rrreee🎜Ici, nous utilisons v-model pour lier la valeur de la zone de saisie à msg, ou v-text v- html v-bind, etc. png"/>🎜🎜🎜🎜3. Ajoutez ':' avant l'attribut label pour lier 🎜🎜🎜rrreee🎜🎜🎜Liez la valeur de msg au titre de la cellule via :titre. Si vous oubliez d'ajouter ' : code>', l'affichage de la page deviendra comme ceci : 🎜🎜🎜 La valeur donnée à title n'est pas la variable msg dans data() mais la chaîne "msg" 🎜🎜🎜🎜 4. Utilisez l'épissage de chaîne avant data `${} `🎜🎜🎜rrreee🎜🎜🎜🎜[Recommandation associée : "🎜tutoriel vue.js🎜"]🎜

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!