Vue語法基礎三（樣式繫結）

vue繫結樣式有繫結class和繫結style兩種方式，這兩種方式都有物件語法和陣列語法。

一、class繫結

1.1 物件語法

使用js物件的方式，也就是key-value的方式，給元素的class屬性繫結樣式，其中key是樣式，value控制key樣式是否有效，value是個布林值。

<

style
>
div div 
.active 
style
>
<
div 
id>
<
div 
:class
="">
div>
<
button 
@click
="chgstyle"
>切換背景色
button
>
div>
<
script
>
let vm 
=new
vue(,
methods: }})
script
>

<

style
>
div div 
.active 
.border 
style
>
<
div 
id>
<
div 
:class
="">
div>
<
button 
@click
="chgstyle"
>切換背景色
button
>
<
button 
@click
="chgborder"
>切換邊框
button
>
div>
<
script
>
let vm 
=new
vue(,
methods: ,
chgborder() }})
script
>

1.2 陣列語法

給class屬性繫結的值也可以是個陣列，陣列中的元素既可以是data中的變數，也可以直接放類名（字串形式）。

<

style
>
div div 
.color 
.border 
style
>
<
div 
id>
<
div 
:class
="[bgclass, 'border']"
>class陣列語法
div>
<
button 
@click
="handle"
>切換
button
>
div>
<
script
>
let vm 
=new
vue(,
methods: }})
script
>

二、style繫結

2.1 物件語法

繫結style時的物件語法，跟內聯樣式的寫法一樣，只是css值部分採用了變數來替代。對照繫結class時的物件語法，那是定義好乙個內部樣式，用value部分來控制內部樣式是否有效。

<

div 
id>
<
div 
:style
="">style物件語法
div>
<
button 
@click
="bigger"
>字型大小變大
button
>
div>
<
script
>
let vm 
=new
vue(,
methods: }})
script
>

<

div 
id>
<
div 
:style
="[basestyle, overridestyle]"
>style陣列語法
div>
<
button 
@click
="handle"
>切換
button
>
div>
<
script
>
let vm 
=new
vue(,
overridestyle: 
},methods: }})
script
>

總結一下：

class的物件語法和style的物件語法不同，前者用布林值控制樣式是否生效，後者跟css寫法一樣。

class的資料語法和style的陣列語法稍有差異，前者通過變數的值去引入內部樣式或者直接用字串引入內部樣式，後者只能通過變數去引入內部樣式，並且內部樣式通過物件的形式定義在資料區。

CSS 知識整理 三 樣式

目錄 css 知識整理 三 樣式 一 字型 二 文字 三 列表 四 背景 css 列表屬性允許你放置 改變列表項標誌，或者將影象作為列表項標誌。設定列表項標誌為實心圓 空心圓 方形 設定列表項標誌為一張 可設定是重複排滿背景還是其他 這個比較簡單，可現用現查 舉個例子 李白噫籲嚱，危乎高哉！蜀道之難...

MVC框架（三）樣式和布局

部分 3 新增樣式和統一的外觀 布局 檔案 layout.cshtml 表示應用程式中每個頁面的布局。它位於 views 資料夾中的 shared 資料夾。開啟這個檔案，把其內容替換為 renderbody 在上面的 中，html 幫助器用於修改 html 輸出 url.content url 內容...

CSS學習筆記 三 樣式宣告

在這篇文章中你能看到有關於 css 樣式設定的常用屬性 1 背景顏色 可以使用background color屬性為元素設定背景顏色，它接受任何合法的顏色值，預設是transparent 注意，background color 屬性不能繼承 2 背景 可以使用background image屬性為元...