在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ VueJS數(shù)據(jù)綁定
VueJS渲染
VueJS事件
VueJS與其他框架比較
VueJS過(guò)渡和動(dòng)畫(huà)
VueJS指令
VueJS模板
VueJS簡(jiǎn)介
VueJS實(shí)例
VueJS混合
VueJS計(jì)算屬性
VueJS組件
VueJS入門(mén)程序
VueJS路由
VueJS環(huán)境設(shè)置
VueJS渲染函數(shù)
VueJS教程
VueJS watch屬性
VueJS Reactive接口
VueJS數(shù)據(jù)綁定
VueJS應(yīng)用示例

VueJS數(shù)據(jù)綁定

在本章中，將學(xué)習(xí)如何操作或賦值給HTML屬性，改變樣式，以及借助VueJS提供的v-bind的綁定指令來(lái)分配類(lèi)。

通過(guò)下面一個(gè)例子來(lái)理解為什么需要以及何時(shí)使用v-bind指令進(jìn)行數(shù)據(jù)綁定。創(chuàng)建一個(gè)文件：binding.html - 

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs綁定數(shù)據(jù)示例</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         {{title}}<hr/>
         <a href = "hreflink" target = "_blank"> 點(diǎn)擊我 </a> <br/>
         <a href = "{{hreflink}}" target = "_blank"> 點(diǎn)擊我 </a>  <br/>
         <a v-bind:href = "hreflink" target = "_blank">易百教程 </a>   <br/>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               title : "數(shù)據(jù)綁定",
               hreflink : "http://www.yiibai.com"
            }
         });
      </script>
   </body>
</html>

在上面的例子中，顯示了一個(gè)標(biāo)題變量和三個(gè)錨鏈接。還從數(shù)據(jù)對(duì)象中為href賦值?，F(xiàn)在，如果在瀏覽器中查看輸出并檢查，將會(huì)看到前兩個(gè)錨鏈接沒(méi)有正確的href，如下面的截圖所示。

第一個(gè)鏈接的href屬性的值顯示為hreflink，第二個(gè)鏈接的href屬性的值為{{hreflink}}，而最后一個(gè)顯示正確的url：http://www.yiibai.com 。

因此，要為HTML屬性賦值，需要按如下方式將其綁定到指令v-bind。如下語(yǔ)句 -

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

VueJS還提供了v-bind指令的簡(jiǎn)寫(xiě)，如下所示。

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

如果在瀏覽器中看到檢查元素，那么定位標(biāo)記不會(huì)顯示v-bind屬性，但它會(huì)顯示純HTML。 當(dāng)我們查看DOM時(shí)，沒(méi)有看到VueJS屬性。

綁定HTML類(lèi)

要綁定HTML類(lèi)，需要使用v-bind:class。 下面來(lái)看看一個(gè)例子，并在其中綁定類(lèi)。創(chuàng)建一個(gè)文件：bind-classes.html - 

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs綁定數(shù)據(jù)示例</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 : "綁定HTML類(lèi)",
               isactive : true
            }
         });
      </script>
   </body>
</html>

有一個(gè)用使用v-bind: class=” {active: isactive}”創(chuàng)建的div。

在這里，isactive是一個(gè)基于true/false的變量。它會(huì)將活動(dòng)類(lèi)應(yīng)用于div。 在數(shù)據(jù)對(duì)象中，已經(jīng)將isactive變量賦值為true。 在樣式.active中定義了一個(gè)類(lèi)，背景色為紅色(red)。

如果變量isactive是true，則顏色將被應(yīng)用，否則不會(huì)被應(yīng)用。以下將是瀏覽器中的輸出 -

在上面的顯示中，可以看到背景顏色是紅色的。class ="active"應(yīng)用于div。
現(xiàn)在，將變量的值更改為false并查看輸出。 如下面的代碼所示，將變量isactive更改為false -

示例一

創(chuàng)建一個(gè)文件：binding-example.html - 

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs綁定數(shù)據(jù)示例</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 : "這是一個(gè)類(lèi)綁定示例~",
               isActive : false,
               hasError : false
            }
         });
      </script>
   </body>
</html>

對(duì)于上面代碼中的div，已經(jīng)應(yīng)用了一個(gè)普通的類(lèi)，例如class ="info"。 基于isActive和hasError變量，其他類(lèi)將被應(yīng)用于div。顯示效果如下 -

這是一個(gè)正常的類(lèi)應(yīng)用。這兩個(gè)變量現(xiàn)在都是false。讓isActive變量為true并查看輸出 -

在上面的顯示中，在DOM中可以看到兩個(gè)類(lèi)被分配給div，info和active。 讓hasError變量為true，isActive為c。效果如下 -

現(xiàn)在，在上面的顯示中看到，info和displayError類(lèi)被應(yīng)用于div。這就是如何根據(jù)條件應(yīng)用多個(gè)類(lèi)。

也可以將類(lèi)作為數(shù)組傳遞。 讓我們舉個(gè)例子來(lái)理解這一點(diǎn)。

示例二

創(chuàng)建一個(gè)文件：binding-example2.html - 

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs綁定數(shù)據(jù)示例</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 : 18px;
         }
         .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 : "這是一個(gè)類(lèi)綁定示例2~",
               infoclass : 'info',
               errorclass : 'displayError'
            }
         });
      </script>
   </body>
</html>

輸出結(jié)果如下 -

正如上面看到的，這兩個(gè)類(lèi)都被應(yīng)用到div。使用一個(gè)變量，并根據(jù)變量的值，分配類(lèi)。

修改上面文件：** 中的代碼為 - 

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs綁定數(shù)據(jù)示例</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 : 18px;
         }
         .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>

下面使用兩個(gè)變量isActive和haserror，div類(lèi)使用相同的類(lèi)，如下面的div標(biāo)簽所示。

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

現(xiàn)在，將haserror變量設(shè)置為true，將isActive變量設(shè)置為false。效果如下 -

下面將為組件中的類(lèi)添加v-bind。 在下面的例子中，我們已經(jīng)向組件模板和組件添加了一個(gè)類(lèi)。
創(chuàng)建一個(gè)文件：binding-for-component.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;
            font-size : 18px;
         }
         .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 : "這是一個(gè)類(lèi)綁定示例",
               infoclass : 'info',
               errorclass : 'displayError',
               isActive : false,
               haserror : true
            },
            components:{
               'new_component' : {
                  template : '<div class = "info">為組件綁定類(lèi)</div>'
               }
            }
         });
      </script>
   </body>
</html>

以下是瀏覽器中的輸出，它將這兩個(gè)類(lèi)應(yīng)用于div上。

根據(jù)true/false在組件部分添加一個(gè)變量來(lái)顯示。

<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，所以不應(yīng)用active類(lèi)，并按照以下屏幕截圖所示應(yīng)用info類(lèi)。

綁定內(nèi)聯(lián)樣式

創(chuàng)建一個(gè)文件：binding-inline-styles.html - 

<html>
   <head>
      <meta charset="utf-8" />
      <title>VueJs綁定數(shù)據(jù)示例</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>

在瀏覽器中輸出結(jié)果如下 -

在上面的示例中，對(duì)于div，應(yīng)用樣式并從數(shù)據(jù)對(duì)象中提取數(shù)據(jù)。

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

也可以通過(guò)把所有的值賦給一個(gè)變量，然后把變量賦值給div來(lái)做同樣的事情。

創(chuàng)建一個(gè)文件：binding-inline-styles2.html - 

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

color和fontSize分配給名為styleobj的對(duì)象，同樣的分配給div。

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

在瀏覽器中輸出結(jié)果如下 -

表單輸入綁定

到目前為止，在前面創(chuàng)建的例子中，已經(jīng)看到v-model綁定輸入文本元素和綁定到指定變量的值。下面將了解表單輸入綁定。

創(chuàng)建一個(gè)文件：form-input-bindings.html - 

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

無(wú)論在輸入框中鍵入的內(nèi)容是什么，v-model都會(huì)被分配值給name，它顯示在{{name}}域中，在下面也會(huì)顯示在文本框中輸入的內(nèi)容。

單選和下拉項(xiàng)

創(chuàng)建一個(gè)文件：form-radio-select.html -

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

在瀏覽器中瀏覽如下 -

修飾符

在下面這個(gè)例子中，我們將使用三個(gè)修飾符 - trim，number和lazy。

創(chuàng)建一個(gè)文件：** - 

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

在瀏覽器中瀏覽如下 -

number修飾符 只允許輸入數(shù)字。 除了數(shù)字之外，不會(huì)有其他的輸入。

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

當(dāng)完全輸入并且用戶離開(kāi)文本框，Lazy修飾符 將顯示文本框中的內(nèi)容。

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

trim修飾符 將刪除在開(kāi)始和結(jié)束時(shí)輸入的任何空格。

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