iT邦幫忙

8

[筆記][Vue.js]打開Vue.js世界的大門(8)-用Vue來玩轉style!

嗨!大家好!最近都維持著兩三天就一篇文章的頻率,說實在有點累人XD,不過年底就要到了很多事情都還沒有一個著落,突然覺得有點著急/images/emoticon/emoticon16.gif,才想說加緊個腳步/images/emoticon/emoticon69.gif

昨天我們說了class的部分,今天來玩style吧!


大家應該都知道,style屬性的值會是CSS,而CSS這個語法是由一個樣式去配上我們要設定給他的值為一組,例如如果要設定背景顏色為紅色可以這麼寫「background-color:red」,由一個代表背景顏色的background-color配上要設定的顏色red,這個寫法是不是很像JavaScript中的物件?我們透過昨天的例子,來看Vue怎麼玩轉style。
HTML

<div id="messageVue">
    <!--直接使用v-bind:style給定一個物件,
        物件內陳述CSS語法-->
    <span :style="{color:'red',font-weight:'bold'}">
        {{message}}
    </span>
</div>

JavaScript

let messageData = {
    message : '這裡是警告文字!',
}

let messageVue = new Vue({
    el:'#messageVue',
    data:messageData,
})

結果應該...是什麼都沒有對吧!我們看一下console:
https://ithelp.ithome.com.tw/upload/images/20180826/20106935xpLZ0ukc1Y.jpg
錯誤的地方有用白色的框框標記起來了!問題出在{color:'red',font-weight:'bold'}身上,這時候再回去詳讀官方文件!
https://ithelp.ithome.com.tw/upload/images/20180826/20106935cf7V1dtNjs.jpg
重點用紅線標起來了,原來是因為物件中無法使用-減號,所以Vue他支援駝峰命名法(詳情可以參考這裡),也就是說我把font-weight:'bold'改成fontWeight:'bold',或是保留減號但是把樣式名稱加上單引號的'font-weight':'bold'都可以搞定這個錯誤!來修正上方的HTML吧!
HTML

<div id="messageVue">
    <!--直接使用v-bind:style給定一個物件,
        物件內陳述CSS語法,如果樣式名稱有減號可以採駝峰式命名法處理。-->
    <span :style="{color:'red',fontWeight:'bold'}">
        {{message}}
    </span>
</div>

https://ithelp.ithome.com.tw/upload/images/20180826/201069355Y94yOGhjb.jpg
如此一來,效果和綁定的文字就出現了!而既然他是使用物件操控style,那我們也可以實現用變數去控制那個屬性的值,像以下的做法:
HTML

<div id="messageVue">
    <!--color指定為後方data的textColor屬性值-->
    <span :style="{color:textColor,fontWeight:'bold'}">
        {{message}}
    </span>
</div>

JavaScript

let messageData = {
    message : '這裡是警告文字!',
    //在這裡用textColor屬性存著文字的顏色
    textColor : 'red',
}

let messageVue = new Vue({
    el:'#messageVue',
    data:messageData,
})

會得到一樣的結果:
https://ithelp.ithome.com.tw/upload/images/20180826/20106935el3QZk12li.jpg
而大家還記得,Vue是個會動態做繫結的前端框架(每次都在講XD),所以當我去改變textColor的值時,前面的畫面也會跟著改變:
https://ithelp.ithome.com.tw/upload/images/20180826/20106935BRn4zeYxLE.jpg
當然官方文件也說把設定好style的物件存在JavaScript,讓:style直接綁定一個物件屬性會更好,下方整理過後的結果會和上方例子一樣:
HTML

<div id="messageVue">
    <!--直接綁定textStyle屬性物件-->
    <span :style="textStyle">
        {{message}}
    </span>
</div>

JavaScript

let messageData = {
    message : '這裡是警告文字!',
    //把要設定的樣式都存放在textStyle屬性
    textStyle : {
        color : 'red',
        fontWeight : 'bold',
    },
}

let messageVue = new Vue({
    el:'#messageVue',
    data:messageData,
})

但有時候我們會有許多一組一組的style物件,如果我們要綁定多個style物件的話,可以使用陣列設定多個物件,如下:
HTML

<div id="messageVue">
    <!--使用陣列同時綁定兩個設定好樣式的物件-->
    <span :style="[textStyle,textThrough]">
        {{message}}
    </span>
</div>

JavaScript

let messageData = {
    message : '這裡是警告文字!',
    textStyle : {
        color : 'red',
        fontWeight : 'bold',
    },
    //新增一個刪除線的樣式物件
    textThrough : {
        textDecoration : 'line-through'
    },
}

let messageVue = new Vue({
    el:'#messageVue',
    data:messageData,
})

結果會同時出現兩個物件都有的屬性,這樣在實務上也能夠更彈性的設定CSS
https://ithelp.ithome.com.tw/upload/images/20180826/20106935KdAfKQ9Sw1.jpg
什麼?你說這樣還不夠彈性?把陣列寫在標籤上不能控制內容?欸嘿嘿!這時候有個Vue屬性非常適合來處理這件事情,就是computed計算屬性!感覺自從學了他以後,幾乎每一篇文章都會提到他XD,這個使用率真的只有高而已,那再整理一下上方的程式碼吧!
HTML

<div id="messageVue">
    <!--修改成綁定計算器的屬性-->
    <span :style="arrTextStyle">
        {{message}}
    </span>
</div>

JavaScript

let messageData = {
    message : '這裡是警告文字!',
    textStyle : {
        color : 'red',
        fontWeight : 'bold',
    },
    textThrough : {
        textDecoration : 'line-through'
    },
}

//新增計算屬性
let messageComputed = {
    //回傳需要設定的style物件陣列
    arrTextStyle : () => {
        return [messageData.textStyle,messageData.textThrough]
    }
}

let messageVue = new Vue({
    el:'#messageVue',
    data:messageData,
    //設定計算屬性
    computed:messageComputed,
})

像上方的做法是不是相對的彈性許多了,雖然目前的畫面還是像上面的例子一樣,但是在實務上運用時,就可以從arrTextStyle裡面去判斷許多情況,再來決定是否要把messageData中設定好的style物件放進陣列回傳。

最後的PS時間,因為每個瀏覽器對style的值可能不同,就有分不一樣的前綴,關於前綴的詳細說明可以參考這篇文章,所以Vue提供了一個style他的value可以是包含多個值的陣列,這邊直接拿官方文件的範例,因為我不是前端設計師沒有了解的很深入/images/emoticon/emoticon46.gif
HTML

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

上方display對應到的值是一個陣列,這時候瀏覽器會從-webkit-box開始,如果不支持這個前綴的話,就會繼續設定成下一個索引的值,當所有都不支援則設定成最後一個索引的flex,繫結過後的結果就變成:style="{ display: 'flex' }"


好的,那下一篇應該會再更仔細的說明Vue的事件綁定,因為剛剛看了文件感覺還滿多的XD,最後感謝大家的觀看!如果文章中有解釋不清楚,或是小弟理解錯誤的地方,還麻煩各位大大留言告訴我,我會再盡快修正或補充!謝謝大家!/images/emoticon/emoticon41.gif


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言