整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
一、先創(chuàng)建一個html文件，記得添加vue庫文件。
二、創(chuàng)建一盒容器vmdiv，用vue綁定它，測試vue綁定后的插入值text1效果。
三、加入文本框和兩個按鈕。
四、通過flex排序，讓它們?nèi)齻€豎排。比例為文本框占4，按鈕占1。
五、測試一下按鈕的點(diǎn)擊事件。
六、給文本框添加style樣式，給它字體大小為16px，并設(shè)置一個變量size，讓它來控制字的大小，通過點(diǎn)擊后，字變大加5，變小減5。
天講了怎么使用css中font-family來設(shè)置字體，如微軟雅黑、宋體、Arial等。繼續(xù)講下使用font-size屬性來定義字體大小。
語法如下:
p {
font-size:20px;
}
px(像素)大小是我們網(wǎng)頁的最常用的單位。谷歌瀏覽器默認(rèn)的字體大小為16px 不同瀏覽器可能默認(rèn)顯示的字體字號大小不一致，盡量給一個明確值大小，不要默認(rèn)大小。可以給<body>指定整個頁面文字的大小。
來看下效果:
對應(yīng)的代碼為:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字體屬性之字體系列</title>
<!--對h2修改下字體-->
<style>
body {
font-size: 16px;
}
</style>
</head>
<body>
<h2>明月幾時有</h2>
<p>明月幾時有，把酒問青天</p>
<p>不知天上宮闕，今夕是何年</p>
<p>我欲乘風(fēng)歸去，又恐瓊樓玉宇</p>
<p>高處不勝寒，起舞弄清影，何似在人間。</p>
</body>
</html>
有沒有發(fā)現(xiàn)除了標(biāo)題標(biāo)簽，其余的字的字體都是16px了？那么這里需要注意一點(diǎn): 標(biāo)題標(biāo)簽比較特殊，需要單獨(dú)指定文字大小。
如下的效果:
可以看到標(biāo)題字體變小了，具體的代碼為:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字體屬性之字體系列</title>
<!--對h2修改下字體-->
<style>
body {
font-size: 16px;
}
h2 {
font-size: 16px;
}
</style>
</head>
<body>
<h2>明月幾時有</h2>
<p>明月幾時有，把酒問青天</p>
<p>不知天上宮闕，今夕是何年</p>
<p>我欲乘風(fēng)歸去，又恐瓊樓玉宇</p>
<p>高處不勝寒，起舞弄清影，何似在人間。</p>
</body>
</html>
可以看到對h2單獨(dú)進(jìn)行了字體設(shè)置
h2 {
font-size: 16px;
}
注意點(diǎn):
不要忘記加上px
標(biāo)題有特殊性，需要單獨(dú)設(shè)置文字大小。
好的，今天就到這里了。晚安~
實(shí)際開發(fā)中經(jīng)常會遇到動態(tài)操作元素樣式的需求。因此，vue 允許開發(fā)者通過 v-bind 屬性綁定指令，為元素動態(tài)綁定 class 屬性的值和行內(nèi)的 style 樣式。
可以通過三元表達(dá)式，動態(tài)的為元素綁定 class 的類名。示例代碼如下：
<h3 class="thin" :class="isItalic?'italic'： ">MyDeep組件</h3>
<button @click="isItalic=!isItalic">Toggle Italic</button>
data() {
return { isItalic: true }
}
.thin{ // 字體變細(xì)
font-weight:200;
}
.italic{ // 傾斜字體
font-style: italic;
}如果元素需要動態(tài)綁定多個 class 的類名，此時可以使用數(shù)組的語法格式：
<h3 class="thin" :class="[isItalic ? 'italic' : '", isDelete ? 'delete' : '"]">
MyDeep 組件
</h3>
<button @click="isItalic=!isItalic">Toggle Italic</button>
<button @click="isDelete=!isDelete">Toggle Delete</button>
data(){
return {
isItalic: true,
isDelete: false,
}
}使用數(shù)組語法動態(tài)綁定 class 會導(dǎo)致模板結(jié)構(gòu)臃腫的問題。此時可以使用對象語法進(jìn)行簡化：
<h3 class="thin" :class="class0bj">MyDeep 組件</h3>
<button @click="class0bj.italic=!class0bj.italic">Toggle Italic</button>
<button @click="class0bj.delete=!class0bj.delete">Toggle Delete</button>
data(){
return {
classobj：{ //對象中，屬性名是class 類名，值是布爾值
italic: true,
delete: false,
}
}
}4. 以對象語法綁定內(nèi)聯(lián)的 style
:style 的對象語法十分直觀——看著非常像 CSS，但其實(shí)是一個 JavaScript 對象。CSS property 名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號括起來) 來命名：
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
