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 id="nbsp-msg-nbsp">{{ 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="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/295/948/331/1640585463271279.png?x-oss-process=image/resize,p_40" class="lazy" alt="Welche verschiedenen Methoden gibt es für die Vue-Datenbindung?"><br>{}}

' Geben Sie die Daten an die Seite weiter

<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. Verwenden Sie den Vue-Befehl

🎜rrreee🎜Hier verwenden wir das V-Modell, um den Wert des Eingabefelds an msg zu binden, oder V-Text v- html v-bind usw. 🎜🎜🎜🎜🎜🎜3. Fügen Sie ':' vor dem Label-Attribut hinzu, um 🎜🎜🎜rrreee🎜🎜🎜Binden Sie den Wert von msg über:title an den Titel der Zelle. Wenn Sie vergessen haben, ':' 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!