Welche Bindungsdaten verwendet Vue?

So binden Sie Daten mit Vue: 1. Verwenden Sie doppelte geschweifte Klammern „{{}}“, um der Seite Daten zu geben. 2. Verwenden Sie die Vue-Anweisung, um eine unidirektionale Datenbindung zu erreichen. Modellanweisung kann eine bidirektionale Datenbindung realisieren; 3. Verwenden Sie „:“, fügen Sie einfach „:“ vor dem Label-Attribut für die Bindung hinzu. 4. Verwenden Sie „${}“, um die Zeichenfolge einfach vor dem zu verbinden Daten }".

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Mehrere Möglichkeiten, Daten mit Vue zu binden

1. Verwenden Sie doppelte geschweifte Klammern „{{}}“, um der Seite Daten zu geben

<template>

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

2. Verwenden Sie den Vue-Befehl

<template>

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

Hier verwenden wir das V-Modell, um den Wert des Eingabefelds an msg zu binden, oder V-Text, V-HTML, V-Bind usw.

1 Bindung Fest (V-Bind): Daten können nur von Daten zurück zur Seite fließen (einseitige Übertragung)

2. Zwei-Wege-Datenbindung (V-Modell): Daten können nicht nur von Daten zur Seite fließen, sondern auch von Seite zu Daten

(1) Die bidirektionale Datenbindung wird im Allgemeinen auf Formularelemente angewendet (z. B. Eingabeauswahl-Kontrollkästchen usw.)

(2) v-model:value kann als v-model abgekürzt werden, da v -model erfasst standardmäßig den Wert

3. Fügen Sie „:“ vor dem Label-Attribut hinzu, um

<template>

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

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

Binden Sie den Wert von msg an den Titel der Zelle durch:title Vergessen Sie, „:“ vor dem Titelattribut hinzuzufügen, die Seite wird wie folgt angezeigt:

Der dem Titel zugewiesene Wert ist nicht die Variable msg in data(), sondern die Zeichenfolge „msg“

4. Verwenden Sie „${, um Zeichenfolgen vor Daten zu verbinden}“.

Das obige ist der detaillierte Inhalt vonWelche Bindungsdaten verwendet Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!