VueJS - Wiązanie

W tym rozdziale dowiesz się, jak manipulować lub przypisywać wartości do atrybutów HTML, zmieniać styl i przypisywać klasy za pomocą dyrektywy bindującej o nazwie v-bind dostępne z VueJS.

Rozważmy przykład, aby zrozumieć, dlaczego potrzebujemy i kiedy używać dyrektywy v-bind do wiązania danych.

Przykład

<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>

W powyższym przykładzie wyświetliliśmy zmienną tytułową i trzy linki zakotwiczenia. Przypisaliśmy również wartość href z obiektu danych.

Teraz, jeśli sprawdzimy dane wyjściowe w przeglądarce i sprawdzimy, zobaczymy, że pierwsze dwa linki zakotwiczenia nie mają poprawnie href, jak pokazano na poniższym zrzucie ekranu.

Pierwszy clickme pokazuje href jako hreflink, a drugi pokazuje go w {{hreflink}}, a ostatni wyświetla poprawny adres URL zgodnie z wymaganiami.

Dlatego, aby przypisać wartości atrybutom HTML, musimy powiązać go z dyrektywą v-bind w następujący sposób.

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

VueJS zapewnia również skrót dla v-bind w następujący sposób.

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

Jeśli widzimy element inspect w przeglądarce, znacznik kotwicy nie pokazuje atrybutu v-bind, jednak wyświetla zwykły HTML. Żadna z właściwości VueJS nie jest widoczna, gdy przechodzimy do DOM.

Wiązanie klas HTML

Aby powiązać klasę HTML, musimy użyć v-bind: class. Rozważmy przykład i powiąż w nim klasy.

Przykład

<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>

Istnieje element div utworzony za pomocą v-bind: class = ”{active: isactive}”.

Tutaj, isactiveto zmienna oparta na prawdzie lub fałszu. Zastosuje klasę aktywną do elementu DIV. W obiekcie danych przypisaliśmy zmiennej isactive jako true. W stylu zdefiniowano klasę.active z czerwonym kolorem tła.

Jeśli zmienna isactive ma wartość true, kolor zostanie zastosowany w przeciwnym razie. Następujące będzie wyjście w przeglądarce.

Na powyższym ekranie widzimy, że kolor tła jest czerwony. Klasa = „aktywny” jest stosowana do elementu div.

Teraz zmieńmy wartość zmiennej na false i zobaczmy wynik. Zmienna isactive jest zmieniana na false, jak pokazano w poniższym kodzie.

<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>

Na powyższym ekranie widzimy, że aktywna klasa nie jest stosowana do div.

Możemy również przypisać wiele klas do znaczników HTML za pomocą atrybutu v-bind.

Przykład

<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>

Dla elementu div w powyższym kodzie zastosowaliśmy normalną klasę, na przykład class = ”info”. Na podstawie zmiennej isActive i hasError inne klasy zostaną zastosowane do elementu div.

Wynik

Jest to normalna klasa stosowana. Obie zmienne są teraz fałszywe. StwórzmyisActive zmienna na true i zobacz dane wyjściowe.

Na powyższym ekranie w DOM możemy zobaczyć dwie klasy przypisane do div, info i active. Ustawmy zmienną hasError na true, a isActive na false.

Teraz, kiedy widzimy na powyższym ekranie, klasy info i displayError są stosowane do div. W ten sposób możemy zastosować wiele klas na podstawie warunków.

Możemy również przekazać klasę jako tablicę. Weźmy przykład, aby to zrozumieć.

Przykład

<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>

Wynik

Jak widać powyżej, obie klasy są stosowane do div. Użyjmy zmiennej i na podstawie wartości zmiennej przypiszmy klasę.

<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>

Użyliśmy dwóch zmiennych isActive i haserror i to samo jest używane dla powiązania klasy div while, jak pokazano w następującym znaczniku div.

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

Jeśli isActive ma wartość true, zostanie do niej przypisana klasa informacji. To samo dotyczy haserror, jeśli to prawda, zostanie do niego zastosowana tylko klasa errorClass.

Teraz ustawmy zmienną haserror na wartość true, a zmienną isActive na false.

Dodamy teraz v-bind dla klas w komponentach. W poniższym przykładzie dodaliśmy klasę do szablonu komponentu, a także do komponentu.

Przykład

<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>

Poniżej przedstawiono dane wyjściowe w przeglądarce. Stosuje obie klasy do końcowego div.

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

Dodaj zmienną w sekcji komponentu do wyświetlenia na podstawie wartości prawda / fałsz.

<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>

Ponieważ zmienna ma wartość false, aktywna klasa nie jest stosowana, a klasa info jest stosowana, jak pokazano na poniższym zrzucie ekranu.

Wiążące style wbudowane

Składnia obiektu

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

W powyższym przykładzie do elementu div stosowany jest styl, a dane są pobierane z obiektu danych.

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

Możemy również zrobić to samo, przypisując wszystkie wartości do zmiennej, a następnie przypisując zmienną do elementu div.

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>

Kolor i fontSize są przypisane do obiektu o nazwie styleobj, a to samo do elementu div.

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

Output

Powiązania danych wejściowych formularza

Do tej pory w utworzonym przez nas przykładzie widzieliśmy v-model wiążący wejściowy element tekstowy i wartość powiązaną z przypisaną zmienną. Dowiedzmy się więcej na ten temat w tej sekcji.

Przykład

<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>

Cokolwiek wpiszemy w polu tekstowym, zostanie wyświetlone poniżej. v-model ma przypisaną nazwę wartości, a nazwa jest wyświetlana w {{nazwa}}, która wyświetla wszystko, co jest wpisane w polu tekstowym.

Wynik

Sprawdźmy więcej przykładów i zobaczmy, jak z niego korzystać.

Radio i wybierz

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

Modyfikatory

W przykładzie użyliśmy trzech modyfikatorów - trim, number i lazy.

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 modifierpozwala tylko na wprowadzanie liczb. Nie wymaga żadnych innych danych wejściowych poza liczbami.

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

Lazy modifier wyświetli zawartość obecną w polu tekstowym po jego całkowitym wprowadzeniu, a użytkownik opuści pole tekstowe.

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

Trim modifier usunie wszelkie spacje wprowadzone na początku i na końcu.

<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