iT邦幫忙

2021 iThome 鐵人賽

DAY 7
0
Modern Web

用vue.js寫出一個實用的科內分享網站系列 第 7

Day7綁手綁腳綁Class

延續昨天
今天主要研究如何把v-for裡面的item做一個客製化的css或是icon
找了許久發現一篇不錯的影片也是在教vuetify怎麼使用 裡面則提到如何用名稱綁定css

p.s. css前面提到蠻多次的但都沒有實際使用今天順便科普一下css 一種用來指定文件該用什麼方式呈現的語言,可以定義它們的樣式、布局…等。白話一點就是幫html穿衣服 我可以設定許多class 給很多的html tag使用 如果class裡面定義的是字的顏色是紅色 則所有套用此class的tag字都會變成紅色
程式碼如下
https://ithelp.ithome.com.tw/upload/images/20210919/20141007UyIdvvYOAo.png

原本的class=”XXXX”改成 :class=”XXXX
在這裡面就可以使用自己的參數以我的程式碼為例
:class=”project ${project.status} px-10
意思就是我所使用的class 分別有project 還有${project.status}以及 px-10這3個
那什麼是${project.status}呢?就是我們昨天projects裡面的item
https://ithelp.ithome.com.tw/upload/images/20210919/20141007pYslLMKZWp.png

所以第一個資料的project.status是”進行中”
第二個資料的project.status是”已開始”
那換句話說什麼是${project.person}呢?
就是”邦喬飛”
再來請看以下的程式碼
https://ithelp.ithome.com.tw/upload/images/20210919/20141007kL5LJo5nUI.png

這段是我在script底下設的style
以第一個class舉例.project.進行中{
Border-left:4px solid #f57f17
}
意思是我定義了一個名字叫做porject且進行中的css
只要我的tag中class含有 project且含有進行中 就會套用border-left:4px solid #f57f17 這個style

那在看回程式碼
https://ithelp.ithome.com.tw/upload/images/20210919/20141007qHKdNmlO5u.png

我的v-expansion-panel 使用了 project ${project.status} 所以會吃到相對應的css
我的 v-btn 使用了status${project.status}所以也會吃到相對應的css

嘟嘟嚕以下是目前的畫面
https://ithelp.ithome.com.tw/upload/images/20210919/20141007yFuQ2vwp0E.png

一個包含許多文章的網站一定要有正常的登入系統
明天來研究一下登入!
我們明天見!


上一篇
Day6一個網站總需要一點首頁吧!
下一篇
Day8燈燈燈燈登入
系列文
用vue.js寫出一個實用的科內分享網站30

尚未有邦友留言

立即登入留言