Welche verschiedenen Methoden gibt es für die Vue-Datenbindung?

Vue-Datenbindungsmethode: 1. Verwenden Sie doppelte geschweifte Klammern „{{}}“, um der Seite Daten zu geben. 2. Verwenden Sie „v-model“, „v-text“, „v-html“, „v -“ bind“ und andere Anweisungen; 3. Fügen Sie „:“ vor dem zu bindenden Label-Attribut hinzu; 4. Verwenden Sie „${}“, bevor Sie die Zeichenfolge vor den Daten zusammenfügen.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Mehrere Möglichkeiten, Daten mit Vue zu binden

1. Verwenden Sie doppelte geschweifte Klammern '{{<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-Welche verschiedenen Methoden gibt es für die Vue-Datenbindung?" alt="Welche verschiedenen Methoden gibt es für die Vue-Datenbindung?"/><br/>{}}</p><p> < /code><strong><span style="max-width:90%">' Geben Sie die Daten an die Seite weiter</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">Nach dem Login kopieren</div></div><p><img src="https://img.php.cn/upload/image/954/182/906/164058541146980Welche%20verschiedenen%20Methoden%20gibt%20es%20f%C3%BCr%20die%20Vue-Datenbindung?" title="1640585411469803 .png" alt="Welche verschiedenen Methoden gibt es für die Vue-Datenbindung?"><img src="https://img.php.cn/upload/image/295/948/331/1640585463271279.png" title="1640585463271279.png" alt="Welche verschiedenen Methoden gibt es für die Vue-Datenbindung?"></p> <p><a href="https://www.php.cn/vuejs/" target="_blank">2. Verwenden Sie den Vue-Befehl</a></p>🎜rrreee🎜Hier verwenden wir das V-Modell, um den Wert des Eingabefelds an msg zu binden, oder V-Text v- html v-bind usw. 🎜🎜<img src="https://img.php.cn/upload/image/208/533/767/1640585416244806.png" title="1640585416244806.png" alt="2. png">🎜🎜🎜🎜3. Fügen Sie ':' vor dem Label-Attribut hinzu, um 🎜🎜🎜rrreee🎜<img src="https://img.php.cn/upload/image/316/593/562/%20zu%20binden.%201640585457259230%20.png" title="1640585457259230.png" alt="Welche verschiedenen Methoden gibt es für die Vue-Datenbindung?">🎜🎜Binden Sie den Wert von msg über:title an den Titel der Zelle. Wenn Sie vergessen haben, '<code>:' hinzuzufügen code>‘, die Seitenanzeige wird wie folgt aussehen: 🎜🎜🎜 Der an title gegebene Wert ist nicht die Variable msg in data(), sondern die Zeichenfolge „msg“ 🎜🎜🎜🎜 4. Verwenden Sie String-Splicing vor data `${} `🎜🎜🎜rrreee🎜🎜🎜🎜[Verwandte Empfehlung: „🎜vue.js Tutorial🎜“]🎜

Das obige ist der detaillierte Inhalt vonWelche verschiedenen Methoden gibt es für die Vue-Datenbindung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!