VueJS - Bindung

In diesem Kapitel erfahren Sie, wie Sie HTML-Attribute bearbeiten oder Werte zuweisen, den Stil ändern und Klassen mithilfe der aufgerufenen Bindungsanweisung zuweisen v-bind erhältlich mit VueJS.

Betrachten wir ein Beispiel, um zu verstehen, warum und wann die v-bind-Direktive für die Datenbindung verwendet werden muss.

Beispiel

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         {{title}}<br/>
         <a href = "hreflink" target = "_blank"> Click Me </a> <br/>
         <a href = "{{hreflink}}" target = "_blank">Click Me </a>  <br/>
         <a v-bind:href = "hreflink" target = "_blank">Click Me </a>   <br/>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "DATA BINDING",
               hreflink : "http://www.google.com"
            }
         });
      </script>
   </body>
</html>

Im obigen Beispiel haben wir eine Titelvariable und drei Ankerlinks angezeigt. Wir haben der href aus dem Datenobjekt auch einen Wert zugewiesen.

Wenn wir nun die Ausgabe im Browser überprüfen und überprüfen, werden wir feststellen, dass die ersten beiden Ankerlinks die href nicht korrekt haben, wie im folgenden Screenshot gezeigt.

Das erste Clickme zeigt die href als hreflink und das zweite zeigt sie in {{hreflink}}, während das letzte die richtige URL anzeigt, wie wir es benötigen.

Um HTML-Attributen Werte zuzuweisen, müssen wir sie daher wie folgt mit der Direktive v-bind binden.

<a v-bind:href = "hreflink" target = "_blank">Click Me </a>

VueJS bietet auch eine Abkürzung für v-bind wie folgt.

<a :href = "hreflink" target = "_blank">Click Me </a>

Wenn das inspect-Element im Browser angezeigt wird, zeigt das Ankertag nicht das v-bind-Attribut an, sondern das einfache HTML. Keine der VueJS-Eigenschaften wird angezeigt, wenn wir das DOM untersuchen.

HTML-Klassen binden

Um die HTML-Klasse zu binden, müssen wir verwenden v-bind: class. Betrachten wir ein Beispiel und binden Klassen darin.

Beispiel

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .active {
            background: red;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "CLASS BINDING",
               isactive : true
            }
         });
      </script>
   </body>
</html>

Es gibt ein div, das mit v-bind erstellt wurde: class = ”{active: isactive}”.

Hier, isactiveist eine Variable, die auf wahr oder falsch basiert. Die aktive Klasse wird auf das div angewendet. Im Datenobjekt haben wir die isaktive Variable als true zugewiesen. Im Stil ist eine Klasse definiert.active mit der Hintergrundfarbe als rot.

Wenn die Variable isactive true ist, wird die Farbe angewendet, andernfalls nicht. Es folgt die Ausgabe im Browser.

In der obigen Anzeige sehen wir, dass die Hintergrundfarbe rot ist. Die Klasse = "aktiv" wird auf das div angewendet.

Lassen Sie uns nun den Wert der Variablen in false ändern und die Ausgabe anzeigen. Die Variable isactive wird wie im folgenden Code gezeigt in false geändert.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .active {
            background: red;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "{active:isactive}"><b>{{title}}</b></div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "CLASS BINDING",
               isactive : false
            }
         });
      </script>
   </body>
</html>

In der obigen Anzeige sehen wir, dass die aktive Klasse nicht auf das div angewendet wird.

Mit dem Attribut v-bind können wir den HTML-Tags auch mehrere Klassen zuweisen.

Beispiel

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div class = "info"  v-bind:class = "{ active: isActive, 'displayError': hasError }">
            {{title}}
         </div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               isActive : false,
               hasError : false
            }
         });
      </script>
   </body>
</html>

Für das div im obigen Code haben wir eine normale Klasse angewendet, Beispiel class = ”info”. Basierend auf der Variablen isActive und hasError werden die anderen Klassen auf das div angewendet.

Ausgabe

Dies ist eine normale Klasse. Beide Variablen sind momentan falsch. Lasst uns machenisActive Variable auf true und sehen Sie die Ausgabe.

In der obigen Anzeige sehen wir im DOM zwei Klassen, die dem div zugeordnet sind, info und active. Machen wir die Variable hasError auf true und isActive auf false.

Wenn wir nun in der obigen Anzeige sehen, werden die Klassen info und displayError auf das div angewendet. Auf diese Weise können wir mehrere Klassen basierend auf Bedingungen anwenden.

Wir können die Klasse auch als Array übergeben. Nehmen wir ein Beispiel, um dies zu verstehen.

Beispiel

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "[infoclass, errorclass]">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError'
            }
         });
      </script>
   </body>
</html>

Ausgabe

Wie wir oben sehen können, werden beide Klassen auf das div angewendet. Verwenden wir eine Variable und weisen Sie die Klasse basierend auf dem Wert der Variablen zu.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : true,
               haserror : false
            }
         });
      </script>
   </body>
</html>

Wir haben zwei Variablen verwendet isActive und haserror und dasselbe wird für das div während der Klassenbindung verwendet, wie im folgenden div-Tag gezeigt.

<div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>

Wenn isActive wahr ist, wird ihm eine Infoklasse zugewiesen. Das gleiche gilt für haserror. Wenn dies der Fall ist, wird nur errorClass darauf angewendet.

Lassen Sie uns nun die haserror-Variable als true und die isActive-Variable als false festlegen.

Wir werden nun v-bind für Klassen in den Komponenten hinzufügen. Im folgenden Beispiel haben wir der Komponentenvorlage und auch der Komponente eine Klasse hinzugefügt.

Beispiel

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <new_component class = "active"></new_component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : false,
               haserror : true
            },
            components:{
               'new_component' : {
                  template : '<div class = "info">Class Binding for component</div>'
               }
            }
         });
      </script>
   </body>
</html>

Es folgt die Ausgabe im Browser. Es wendet beide Klassen auf final div an.

<div class = ”info active”></div>

Fügen Sie im anzuzeigenden Komponentenabschnitt eine Variable hinzu, die auf true / false basiert.

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
            font-size : 25px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <new_component v-bind:class = "{active:isActive}"></new_component>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : false,
               haserror : true
            },
            components:{
               'new_component' : {
                  template : '<div class = "info">Class Binding for component</div>'
               }
            }
         });
      </script>
   </body>
</html>

Da die Variable false ist, wird die aktive Klasse nicht angewendet und die Info-Klasse wird angewendet, wie im folgenden Screenshot gezeigt.

Inline-Stile binden

Objektsyntax

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "Inline style Binding",
               activeColor: 'red',
               fontSize :'30'
            }
         });
      </script>
   </body>
</html>

Output

Im obigen Beispiel wird für div der Stil angewendet und die Daten werden aus dem Datenobjekt abgerufen.

<div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
data: {
   title : "Inline style Binding",
   activeColor: 'red',
   fontSize :'30'
}

Wir können dasselbe auch tun, indem wir alle Werte einer Variablen zuweisen und dann die Variable dem div zuweisen.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <div v-bind:style = "styleobj">{{title}}</div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "Inline style Binding",
               styleobj : {
                  color: 'red',
                  fontSize :'40px'
               }
            }
         });
      </script>
   </body>
</html>

Die Farbe und die Schriftgröße werden dem Objekt styleobj zugewiesen, und das gleiche wird dem div zugewiesen.

<div v-bind:style = "styleobj">{{title}}</div>

Output

Formulareingabebindungen

Bisher haben wir in dem von uns erstellten Beispiel gesehen, dass das V-Modell das Eingabetextelement und den Wert an eine zugewiesene Variable bindet. Lassen Sie uns in diesem Abschnitt mehr darüber erfahren.

Beispiel

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <h3>TEXTBOX</h3>
         <input  v-model = "name" placeholder = "Enter Name" />
         <h3>Name entered is : {{name}}</h3>
         <hr/>
         <h3>Textarea</h3>
         <textarea v-model = "textmessage" placeholder = "Add Details"></textarea>
         <h1><p>{{textmessage}}</p></h1>
         <hr/>
         <h3>Checkbox</h3>
         <input type = "checkbox" id = "checkbox" v-model = "checked"> {{checked}}
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               name:'',
               textmessage:'',
               checked : false
            }
         });
      </script>
   </body>
</html>

Was auch immer wir in die Texbox eingeben, wird unten angezeigt. v-model wird der Wert name zugewiesen und der Name wird in {{name}} angezeigt, wodurch angezeigt wird, was auch immer in das Textfeld eingegeben wurde.

Ausgabe

Schauen wir uns einige weitere Beispiele und deren Verwendung an.

Radio und Select

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <h3>Radio</h3>
         <input type = "radio" id = "black" value = "Black" v-model = "picked">Black
         <input type = "radio" id = "white" value = "White" v-model = "picked">White
         <h3>Radio element clicked : {{picked}} </h3>
         <hr/>
         <h3>Select</h3>
         <select v-model = "languages">
            <option disabled value = "">Please select one</option>
            <option>Java</option>
            <option>Javascript</option>
            <option>Php</option>
            <option>C</option>
            <option>C++</option>
         </select>
         <h3>Languages Selected is : {{ languages }}</h3>
         <hr/>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               picked : 'White',
               languages : "Java"
            }
         });
      </script>
   </body>
</html>

Output

Modifikatoren

Wir haben im Beispiel drei Modifikatoren verwendet - Trimmen, Nummer und Faulenzen.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">
         <br/>
         <span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">
         <h3>Display Message : {{msg}}</h3>
         <br/>
         <span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">
         <h3>Display Message : {{message}}</h3>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               age : 0,
               msg: '',
               message : ''
            }
         });
      </script>
   </body>
</html>

Output

Number modifiererlaubt nur die Eingabe von Zahlen. Außer Zahlen werden keine weiteren Eingaben vorgenommen.

<span style = "font-size:25px;">Enter Age:</span> <input v-model.number = "age" type = "number">

Lazy modifier zeigt den im Textfeld vorhandenen Inhalt an, sobald er vollständig eingegeben wurde und der Benutzer das Textfeld verlässt.

<span style = "font-size:25px;">Enter Message:</span> <input v-model.lazy = "msg">

Trim modifier entfernt alle am Anfang und am Ende eingegebenen Leerzeichen.

<span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved