vueJS 006 css 樣式了解

2021-10-03 22:38:00 字數 2920 閱讀 2765

1. 陣列

<

!doctype html>

"zh"

>

"utf-8"

>

"viewport"

content=

"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

document<

/title>

"../js/vue2.6.11.js"

>

<

/script>

"text/css"

>

.red

.size

<

/style>

<

/head>

>

class

="['red', 'size']"

>滅絕植物:鄂西商陸<

/label>

<

/div>

var vm =

newvue()

;<

/script>

<

/body>

<

/html>

2. 變數,資料繫結的方式
<

!doctype html>

"zh"

>

"utf-8"

>

"viewport"

content=

"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

document<

/title>

"../js/vue2.6.11.js"

>

<

/script>

"text/css"

>

.setred

.fstyle

<

/style>

<

/head>

>

class

="mystyle"

>滅絕植物:鄂西商陸<

/div>

<

/div>

var vm =

newvue(}

});<

/script>

<

/body>

<

/html>

3. 三元表示式
<

!doctype html>

"zh"

>

"utf-8"

>

"viewport"

content=

"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

document<

/title>

"../js/vue2.6.11.js"

>

<

/script>

"text/css"

>

.setred

.fstyle

.active

<

/style>

<

/head>

>

class

="['setred','fstyle',flag?'active':'']"

>滅絕植物:鄂西商陸<

/div>

<

/div>

var vm =

newvue(}

});<

/script>

<

/body>

<

/html>

4. 物件替代三元表示式,提高可讀性
<

!doctype html>

"zh"

>

"utf-8"

>

"viewport"

content=

"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"

>

"x-ua-compatible" content=

"ie=edge"

>

document<

/title>

"../js/vue2.6.11.js"

>

<

/script>

"text/css"

>

.setred

.fstyle

.active

<

/style>

<

/head>

>

class

="['setred','fstyle',]"

>滅絕植物:鄂西商陸<

/div>

<

/div>

var vm =

newvue(}

});<

/script>

<

/body>

<

/html>

006 HTML的CSS與鏈結

html的css html4.0後,所有元素的格式化 均可移除html文件,然後乙個對立的樣式表。瀏覽器讀到乙個樣式表,會按樣式表對html文件進行格式化,再顯示出來。樣式表的三種插入方式 1.外部樣式表 說明 此方法適用於樣式需要被應用到很多頁面的情況 2.內部樣式表 head部分通過標籤定義內部...

字型顏色的使用 CSS入門基礎(006)

今天我們接著說字型樣式的內容。color字型顏色 語法 color 顏色值 顏色值可以是乙個關鍵字,也可以是乙個十六進製制的rgb值。關鍵字的顏色值,其實就是比較常用的顏色的一種列舉值,比如 black,黑色 white,白色 green,綠色 blue,藍色 red,紅色 gray,灰色 等等 示...

css去掉iPhone iPad預設按鈕樣式

最近用html5 寫了個手機站,在測試的時候發現在蘋果手機上的乙個問題。所有的按鈕都被了蘋果自帶的樣式給替換了。效果如下 但是正確的應該是醬紫滴!只要在樣式裡面加一句去掉css 去掉iphone ipad的預設按鈕樣式就可以了!input type button input type submit ...