VueJS資料系結
在本章中，將學習如何操作或賦值給HTML屬性，改變樣式，以及借助VueJS提供的v-bind的系結指令來分配類。
通過下面一個例子來理解為什麼需要以及何時使用v-bind指令進行資料系結。建立一個檔案：binding.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs系結資料範例</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
{{title}}<hr/>
<a href = "hreflink" target = "_blank"> 點選我 </a> <br/>
<a href = "{{hreflink}}" target = "_blank"> 點選我 </a> <br/>
<a v-bind:href = "hreflink" target = "_blank">易百教學 </a> <br/>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
title : "資料系結",
hreflink : "https://www.tw511.com"
}
});
</script>
</body>
</html>
在上面的例子中，顯示了一個標題變數和三個錨連結。還從資料物件中為href賦值。現在，如果在瀏覽器中檢視輸出並檢查，將會看到前兩個錨連結沒有正確的href，如下面的截圖所示。
第一個連結的href屬性的值顯示為hreflink，第二個連結的href屬性的值為{{hreflink}}，而最後一個顯示正確的url：https://www.tw511.com 。
因此，要為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。 下面來看看一個例子，並在其中系結類。建立一個檔案：bind-classes.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs系結資料範例</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類",
isactive : true
}
});
</script>
</body>
</html>
有一個用使用v-bind: class=」 {active: isactive}」建立的div。
在這裡，isactive是一個基於true/false的變數。它會將活動類應用於div。 在資料物件中，已經將isactive變數賦值為true。 在樣式.active中定義了一個類，背景色為紅色(red)。
如果變數isactive是true，則顏色將被應用，否則不會被應用。以下將是瀏覽器中的輸出 -
在上面的顯示中，可以看到背景顏色是紅色的。class ="active"應用於div。
現在，將變數的值更改為false並檢視輸出。 如下面的程式碼所示，將變數isactive更改為false -
範例一
建立一個檔案：binding-example.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs系結資料範例</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 : "這是一個類系結範例~",
isActive : false,
hasError : false
}
});
</script>
</body>
</html>
對於上面程式碼中的div，已經應用了一個普通的類，例如class ="info"。 基於isActive和hasError變數，其他類將被應用於div。顯示效果如下 -
這是一個正常的類應用。這兩個變數現在都是false。讓isActive變數為true並檢視輸出 -
在上面的顯示中，在DOM中可以看到兩個類被分配給div，info和active。 讓hasError變數為true，isActive為c。效果如下 -
現在，在上面的顯示中看到，info和displayError類被應用於div。這就是如何根據條件應用多個類。
也可以將類作為陣列傳遞。 讓我們舉個例子來理解這一點。
範例二
建立一個檔案：binding-example2.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs系結資料範例</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 : "這是一個類系結範例2~",
infoclass : 'info',
errorclass : 'displayError'
}
});
</script>
</body>
</html>
輸出結果如下 -
正如上面看到的，這兩個類都被應用到div。使用一個變數，並根據變數的值，分配類。
修改上面檔案：** 中的程式碼為 -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs系結資料範例</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>
下面使用兩個變數isActive和haserror，div類使用相同的類，如下面的div標籤所示。
<div v-bind:class = "[isActive ? infoclass : '', haserror ? errorclass : '']">{{title}}</div>
現在，將haserror變數設定為true，將isActive變數設定為false。效果如下 -
下面將為元件中的類新增v-bind。 在下面的例子中，我們已經向元件模板和元件新增了一個類。
建立一個檔案：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 : "這是一個類系結範例",
infoclass : 'info',
errorclass : 'displayError',
isActive : false,
haserror : true
},
components:{
'new_component' : {
template : '<div class = "info">為元件系結類</div>'
}
}
});
</script>
</body>
</html>
以下是瀏覽器中的輸出，它將這兩個類應用於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類。
係結內聯樣式
建立一個檔案：binding-inline-styles.html -
<html>
<head>
<meta charset="utf-8" />
<title>VueJs系結資料範例</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>
在瀏覽器中輸出結果如下 -
在上面的範例中，對於div，應用樣式並從資料物件中提取資料。
<div v-bind:style = "{ color: activeColor, fontSize: fontSize + 'px' }">{{title}}</div>
data: {
title : "Inline style Binding",
activeColor: 'red',
fontSize :'30'
}
也可以通過把所有的值賦給一個變數，然後把變數賦值給div來做同樣的事情。
建立一個檔案：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的物件，同樣的分配給div。
<div v-bind:style = "styleobj">{{title}}</div>
在瀏覽器中輸出結果如下 -
表單輸入系結
到目前為止，在前面建立的例子中，已經看到v-model係結輸入文字元素和系結到指定變數的值。下面將了解表單輸入系結。
建立一個檔案：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>
無論在輸入框中鍵入的內容是什麼，v-model都會被分配值給name，它顯示在{{name}}域中，在下面也會顯示在文字框中輸入的內容。
單選和下拉項
建立一個檔案：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>
在瀏覽器中瀏覽如下 -
修飾符
在下面這個例子中，我們將使用三個修飾符 - 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>
在瀏覽器中瀏覽如下 -
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">
`