記錄著從 Vue 新手村出發的練功歷程...
本篇任務指引:
- 學會屬性(Attribute)的綁定
今天想要分享如何針對網頁元件進行一些屬性(Attribute)的新增綁定,
首先,既然是以最最最初心者的角度撰寫本篇,
總得要解釋一下何謂屬性(Attribute)。
根據 W3S 說明:
「All HTML elements can have attributes.」
每一個網頁元件都有自己的屬性,
例如 <a></a> 就是超連結,完整的使用:
<a href="https://dotblogs.com.tw/explooosion" target="_blank">帶著 Vue 框架闖蕩異世界</a>
上面例子中屬性就有:
- href:超連結目標網址
- target:點擊後呈現方式
好!想必各位一定看了快爆炸了,這麼簡單還要提!!!
OK,這麼多的屬性,如果我們不希望他被寫死,
假設有個超連結,尚未設定任何屬性:
<a>帶著 Vue 框架闖蕩異世界</a>
透過設定的方式,通常有以下方法:
[JavaScript]
document.getElementsByTagName('a')[0].setAttribute('href','https://dotblogs.com.tw/explooosion');
[JQuery]
$('a').attr('href','https://dotblogs.com.tw/explooosion');
那麼在 Vue 中要如何使用呢?
首先對準地面釋放魔力:
畫陣後就可以練成惹:
...
[基本設定]
在 Vue 中,我們會使用到「v-bind」,指定我們要的值,
參照上述的範例我們實際寫寫看:
<h1>VueJS - Bind</h1>
<a v-bind:href="url">帶著 Vue 框架闖蕩異世界</a>
<script>
new Vue({
el: 'a',
data: {
url: 'https://dotblogs.com.tw/explooosion'
}
});
</script>
利用 vind: 後面接著我們要設定的屬性,就可以進行屬性的綁定,
至於 url 就是變數,我們在 data:{} 裡面進行宣告,
設定為字串:https://dotblogs.com.tw/explooosion,
如此一來就可進行屬性的設定。
是不是很簡單呢~!
[多種設定方法]
在屬性綁定上其實有很多種作法都可達到,Vue 提供了以下三種:
-
v-bind:href="url"
-
v-bind="{ href : url }"
-
:href="url"
在使用上結果並不會有差異,其實第三種算是提供簡寫的方法,
而我們可以依據需求或喜好進行設定,正所謂殊途同歸。
<a v-bind:href="url">VueJS</a>
<a :href="url">VueJS</a>
<a v-bind="{ href : url }">VueJS</a>
[條件式設定]
說明之前我們先實作透過 v-bind 的方式設定 class:
<style>
.selected {
color: #f00;
}
</style>
<h1>VueJS - Bind</h1>
<span :class="isSelected">帶著 Vue 框架闖蕩異世界</span>
<script>
new Vue({
el: 'span',
data: {
isSelected: 'selected',
}
});
</script>
- 在 data 中的 isSelected 是一個變數,其值為字串 'selected'
實際畫面:
上述我們利用 :class 方式設定,透過 chrome debug (F12)觀察:
- 其實就是 class="selected"
接下來提到的是透過條件的判斷,決定是否使用該 class,
當條件成立時(true)才會進行設定:
<h1>VueJS - Bind</h1>
<span :class="{ selected : isSelected }">帶著 Vue 框架闖蕩異世界</span>
<script>
new Vue({
el: 'span',
data: {
isSelected: true
}
});
</script>
此時,data 中的變數 isSelected 是一個布林值(bool),
如果設定 true,那麼該條件式 { selected : isSelected } 就會成立。
實際畫面:
... 跟剛剛上述一樣就不貼了~
如果改成 false:
[動腦探討]
值得一提的是,因為條件不成立那麼檢視結果會是什麼呢?
第一種結果:
<span>帶著 Vue 框架闖蕩異世界</span>
第二種結果:
<span class="false">帶著 Vue 框架闖蕩異世界</span>
第三種結果:
<span class="">帶著 Vue 框架闖蕩異世界</span>
第四種結果:
<span class>帶著 Vue 框架闖蕩異世界</span>
神明來電告訴你答案:
神明:「F12 給他開下去看看!!」
你答對了嗎???
其實我也猜錯,我還以為是空的第三種。
[三元式設定]
如果我們希望利用三元式運算來表達,就要把大括號 { } 改為中括號 [ ] ,
當 isSelected 為 true 的時候,就會帶入 'selected ' 字串,否則為空的。
<span :class="[ isSelected ? 'selected' : '' ]">帶著 Vue 框架闖蕩異世界</span>
你也可以把該字串改成利用讀取 data 中的變數:
<span :class="[ isSelected ? className : '' ]">帶著 Vue 框架闖蕩異世界</span>
然後到 Vue 的 data 中新增一個變數 className:
new Vue({
el: 'span',
data: {
isSelected: true,
className: 'selected'
}
});
實際畫面會是一樣的:
如果當條件為否的時候,把原本的空字串改為別的 class 名稱,
同樣就可以套用該 class。
如法炮製,我們額外新增一個 class「unselected」:
<style>
.selected {
color: red;
}
.unselected {
color: #0f0;
}
</style>
<h1>VueJS - Bind</h1>
<span :class="[ isSelected ? 'selected' : 'unselected' ]">帶著 Vue 框架闖蕩異世界</span>
<script>
new Vue({
el: 'span',
data: {
isSelected: false
}
});
</script>
當 false 的時候 class 就會套用 unselected,也就變成綠色了!
[以陣列形式設定]
為什麼要使用陣列呢?
當如果我們 class 不只想套用一個的時候,就會使用到~
假如我們有這麼多的樣式:
.font-size {
font-size: 1.5em;
}
.font-color {
color: #f0f;
}
.font-weight {
font-weight: bold;
}
.font-underline {
text-decoration: underline;
}
利用陣列的方式就可套用,同時也能夠混搭三元式判斷:
<h1>VueJS - Bind</h1>
<span :class="[ 'font-size','font-color','font-weight', hasLine ? 'font-underline' : '' ]">帶著 Vue 框架闖蕩異世界</span>
<script>
new Vue({
el: 'span',
data: {
hasLine: true
}
});
</script>
畫面結果:
對於混搭的條件式更好的寫法:
<span :class="[ 'font-size','font-color','font-weight', { 'font-underline' : hasLine } ]">帶著 Vue 框架闖蕩異世界</span>
- 直接利用 { } 就可做到,不過這是沒有「否則」的條件哦~
[其他屬性]
最後補充一下~~
除了以上提到的 class ,我們也可以設定很多其他屬性。
例如 id:
<h1>VueJS - Bind</h1>
<span :id="idValue">帶著 Vue 框架闖蕩異世界</span>
<script>
new Vue({
el: 'span',
data: {
idValue: "span1"
}
});
</script>
畫面結果:
以上為針對 v-bind 的筆記分享,希望對各位有幫助。
趕快慶祝一下吧!~
Next Stop:
Vue.js 2.0 - 帶著 Vue 框架闖蕩異世界 - [5]起死回生過濾器
有勘誤之處,不吝指教。ob'_'ov