沿用專案並加入新的router-view:
src/view加入檔案,命名為BindDemo.vue,並在檔案中加入template。
src/router/index.js中,import BindDemo.vue並設定routes。
src/Layout.vue的<template>中加入<router-link> 設定BindDemo路徑與參數。
存檔後執行,點選頁面右側v-bind選單,顯示畫面。
接下來開始實作v-bind。
v-bind 屬性綁定
v-bind可以用來綁定HTML上的屬性(attribute),對HTML屬性作綁定與操作,如title、style、class、disable…等,如同以往以DOM(Document Object Model)對HTML上的屬性作操作一樣。
在Vue中,綁定HTML屬性的語法為 v-bind:屬性名稱 = "屬性的值"
。
可以透過v-bind綁定各種屬性,如以下:
title屬性
在src/views/BindDemo.vue的template加入<input>標籤並設定HTML屬性title為"TitleValue"。
v-bind:title="TitleValue"
在src/views/BindDemo.vue加入script並設定data與title的值,export出來讓v-bind做綁定。
存檔執行後,將滑鼠游標放置在text上,即可跑出title "請輸入內容"。
disabled屬性
在剛剛建立的<input>標籤設定HTML屬性disabled為"true"。
v-bind:disabled="true"
存檔執行,即可看到text反灰無法輸入。
src屬性
在template中加入<img/>並指定src為"SrcURL"。
v-bind:src="SrcURL"
在script中新增SrcURL的值,export出來讓v-bind做綁定。
存檔執行後,即可看到image。
v-bind縮寫
v-bind語法也可以縮寫,從原本的v-bind:屬性名稱
改為:屬性名稱
。
除了上面的HTML屬性外,v-bind也能夠綁定其他各種的HTML屬性,可參考 https://www.w3schools.com/tags/ref_attributes.asp。
v-bind Class綁定
v-bind綁定Class屬性。透過設定Class的綁定與否,可以達到動態切換Class的效果。
在src/views/BindDemo.vue加入<style>區塊與MyCSS。
在<script>區塊的data中增加MyCSS。
在<template>下方增加<label>綁定class="MyCSS"。
:class="MyCSS"
存檔執行,即可看到My CSS Sytle與榜定的calss。
另外,可以在data定義變數來判斷是否套用class,用來動態綁定class。
在<script>區塊中加入兩個屬性,isActive與notActiv,值分別為true與false。
將原本的<label>增加為兩個,分別以:class="{class名稱: 綁定與否}",各自設定為:class="{ MyCSS: isActive }"
與:class="{ MyCSS: notActive }"
。
存檔執行後,可以看到#17因為是isActive: true,所以會綁定class。
而Shohei Ohtani則是notActive: fals所以不會有class效果。
綁定多個class
class的綁定,也可以用陣列的方式[{class1名稱},{class2名稱}]
來綁定多個class。
在<style>區塊增加MyCSS2,其背景顏色與文字顏色跟MyCSS相反。
在<style>區塊的data中增加MyCSS2。
在<template>區塊中,將兩個<label>分別以下面語法做綁定
:class="[{ MyCSS: isActive }, { MyCSS2: notActive }]"
:class="[{ MyCSS: notActive }, { MyCSS2: isActive }]"
存檔執行後,可以看到:
#17的綁定只有MyCSS為isActive: true,所以只會呈現MyCSS的效果(紅底白字)。
而Shohei Ohtani則是MyCSS2為isActive: true,所以只會有MyCSS2的效果(白底紅字)。
套用bootstrap
安裝bootstrap,並綁定bootstrap的CSS。
npm安裝bootstrap
開啟終端機,輸入:npm install bootstrap
安裝完後,就可以看到node_modules多了bootstrap資料夾。
在src/main.js中import bootstrap.min.css,並在建立Vue實體時use()。
在src/views/BindDemo.vue的<template>區塊中變更第6行<input>的HTML屬性,指定 :class="['form-control']"
。(會用[' ']包住class,是因為class名稱有"-",需要特別做處理)
存檔執行,可以看到input套用了bootstrap的class。
v-bind Style綁定
透過 :style 語法,綁定一個或多個inline-style樣式。
如果原本想寫在<div>標籤內的style如下:
在vue則可寫成 :style="要綁定的CSS樣式"
。
在<div>綁定style樣式為"divCSS"。
:style="divCSS"
另外再<script>區塊加入"divCSS"。
其中border-style跟border-color,因為有"-"的關係,要改成駝峰式的寫法。
存檔執行,顯示的畫面。