VueJS - 資料繫結

上一頁
下一頁

本章將學習如何操作或賦值給HTML屬性，更改樣式，並使用VueJS提供的v-bind指令繫結類。

讓我們來看一個例子，瞭解為什麼我們需要以及何時使用v-bind指令進行資料繫結。

示例

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

在上面的例子中，我們顯示了一個標題變數和三個錨鏈接。我們還從資料物件中為href賦值。

現在，如果我們在瀏覽器中檢視輸出並檢查，我們會看到前兩個錨鏈接的href沒有正確顯示，如下面的截圖所示。

Anchor Tag

第一個clickme顯示href為hreflink，第二個顯示為{{hreflink}}，而最後一個顯示了我們需要的正確url。

因此，要為HTML屬性賦值，我們需要使用v-bind指令進行繫結，如下所示。

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

VueJS還為v-bind提供了簡寫，如下所示。

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

如果我們在瀏覽器中檢視元素檢查，錨標籤不會顯示v-bind屬性，但是，它會顯示純HTML。當我們檢查DOM時，不會看到任何VueJS屬性。

繫結HTML類

要繫結HTML類，我們需要使用v-bind:class。讓我們來看一個例子並將其中的類繫結起來。

示例

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

這裡建立了一個帶有v-bind:class="{active: isactive}"的div。

這裡，isactive是一個基於true或false的變數。它會將active類應用於div。在data物件中，我們將isactive變數賦值為true。在樣式中定義了一個.active類，其背景顏色為紅色。

如果變數isactive為true，則會應用顏色，否則不會。瀏覽器中的輸出如下所示。

Class Binding

在上面的顯示中，我們可以看到背景顏色為紅色。類"active"已應用於div。

現在，讓我們將變數的值更改為false並檢視輸出。isactive變數更改為false，如下面的程式碼所示。

<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>
ID Class Binding

在上面的顯示中，我們可以看到active類沒有應用於div。

我們還可以使用v-bind屬性為HTML標籤賦值多個類。

示例

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

對於上面的程式碼中的div，我們應用了一個普通類，例如class="info"。根據isActive和hasError變數，其他類將應用於div。

輸出

Info

這是一個應用的普通類。目前兩個變數都是false。讓我們將isActive變數設定為true並檢視輸出。

isActive

在上面的顯示中，在DOM中我們可以看到兩個類分配給div，info和active。讓我們將hasError變數設定為true，並將isActive設定為false。

Dom

現在，當我們在上面的顯示中看到時，info和displayError類被應用於div。這就是我們根據條件應用多個類的方法。

我們也可以將類作為陣列傳遞。讓我們來看一個例子來理解這一點。

示例

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

輸出

displayError

正如我們上面看到的，這兩個類都被應用於div。讓我們使用一個變數，並根據變數的值來分配類。

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

我們使用了兩個變數isActive和haserror，它們在div的類繫結中使用，如下面的div標籤所示。

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

如果isActive為true，則將infoclass分配給它。hasError也是如此，如果為true，則只有errorClass將應用於它。

haserror

現在，讓我們將haserror變數設定為true，並將isActive變數設定為false。

isActive variable

我們現在將在元件中新增類的v-bind。在下面的例子中，我們向元件模板和元件添加了一個類。

示例

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

以下是瀏覽器中的輸出。它將這兩個類應用於最終的div。

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

新增一個元件部分中的變數來顯示，基於true/false。

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

由於變數為false，因此未應用active類，並且應用了info類，如下面的螢幕截圖所示。

Class Applied

繫結內聯樣式

物件語法

示例

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

輸出

Inline Style Binding

在上面的例子中，對於div，應用了樣式，並從data物件中獲取資料。

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

我們也可以透過將所有值分配給一個變數，然後將變數分配給div來做同樣的事情。

示例

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

顏色和fontSize被分配給名為styleobj的物件，並將相同的物件分配給div。

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

輸出

Color Inline Style Binding

表單輸入繫結

到目前為止，在我們建立的示例中，我們已經看到v-model繫結輸入文字元素並將值繫結到分配的變數。讓我們在本節中進一步瞭解它。

示例

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

我們在文字框中輸入的內容都會顯示在下面。v-model被賦值為name，name顯示在{{name}}中，顯示文字框中輸入的任何內容。

輸出

Form Input Binding

讓我們檢視更多示例以及如何使用它。

單選按鈕和選擇

示例

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

輸出

Radio Button

修飾符

我們在示例中使用了三個修飾符——trim、number和lazy。

示例

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

輸出

Modifier

number修飾符只允許輸入數字。除了數字之外，它不會接受任何其他輸入。

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

lazy修飾符將在使用者完全輸入內容並離開文字框後顯示文字框中的內容。

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

trim修飾符將刪除開頭和結尾的任何空格。

<span style = "font-size:25px;">Enter Message : </span><input v-model.trim = "message">
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.