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 sont les différentes méthodes de liaison de données vue ?" alt="Quelles sont les différentes méthodes de liaison de données vue ?"/><br/>{}}</p><p> < /code><strong><span style="max-width:90%">' Donnez les données à la page</span></strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">&lt;template&gt; &lt;!-- 有时我们需要给要绑定的值拼接字符串，比如需要控制样式，拼接字符串时，那我们就需要这样写`${}`， --&gt; &lt;div class=&quot;mainBody&quot;&gt; &lt;CellGroup&gt; &lt;Cell :title=&quot;msg&quot;/&gt; &lt;!-- 将‘江枫渔火对愁眠’单元格 的背景色绑定到 color:&amp;#39;aqua&amp;#39; --&gt; &lt;Cell title=&amp;#39;江枫渔火对愁眠&amp;#39; :style=&quot;`background-color: ${color}`&quot;/&gt; &lt;!-- 将‘江枫渔火对愁眠’拼接在msg：&amp;#39;月落乌啼霜满天&amp;#39;后--&gt; &lt;Cell :title=&quot;`${msg}，江枫渔火对愁眠`&quot; /&gt; &lt;/CellGroup&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { data(){ return{ msg:&amp;#39;月落乌啼霜满天&amp;#39;, color:&amp;#39;aqua&amp;#39; } } } &lt;/script&gt;</pre><div class="contentsignin">Copier après la connexion</div></div><p><img src="https://img.php.cn/upload/image/954/182/906/164058541146980Quelles%20sont%20les%20diff%C3%A9rentes%20m%C3%A9thodes%20de%20liaison%20de%20donn%C3%A9es%20vue%C2%A0?" title="1640585411469803 .png" alt="Quelles sont les différentes méthodes de liaison de données vue ?"><img src="https://img.php.cn/upload/image/295/948/331/1640585463271279.png" title="1640585463271279.png" alt="Quelles sont les différentes méthodes de liaison de données vue ?"></p> <p><a href="//m.sbmmt.com/vuejs/" target="_blank">2. Utilisez la commande vue</a></p>🎜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🎜<img src="https://img.php.cn/upload/image/316/593/562/%201640585457259230%20.png" title="1640585457259230.png" alt="Quelles sont les différentes méthodes de liaison de données vue ?">🎜🎜Liez la valeur de msg au titre de la cellule via :titre. Si vous oubliez d'ajouter '<code> : 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!