一、先創建一個html文件,記得添加vue庫文件。
二、創建一盒容器vmdiv,用vue綁定它,測試vue綁定后的插入值text1效果。
三、加入文本框和兩個按鈕。
四、通過flex排序,讓它們三個豎排。比例為文本框占4,按鈕占1。
五、測試一下按鈕的點擊事件。
六、給文本框添加style樣式,給它字體大小為16px,并設置一個變量size,讓它來控制字的大小,通過點擊后,字變大加5,變小減5。
天講了怎么使用css中font-family來設置字體,如微軟雅黑、宋體、Arial等。繼續講下使用font-size屬性來定義字體大小。
語法如下:
p {
font-size:20px;
}
px(像素)大小是我們網頁的最常用的單位。谷歌瀏覽器默認的字體大小為16px 不同瀏覽器可能默認顯示的字體字號大小不一致,盡量給一個明確值大小,不要默認大小。可以給<body>指定整個頁面文字的大小。
來看下效果:
對應的代碼為:
<!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>我欲乘風歸去,又恐瓊樓玉宇</p>
<p>高處不勝寒,起舞弄清影,何似在人間。</p>
</body>
</html>
有沒有發現除了標題標簽,其余的字的字體都是16px了?那么這里需要注意一點: 標題標簽比較特殊,需要單獨指定文字大小。
如下的效果:
可以看到標題字體變小了,具體的代碼為:
<!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>我欲乘風歸去,又恐瓊樓玉宇</p>
<p>高處不勝寒,起舞弄清影,何似在人間。</p>
</body>
</html>
可以看到對h2單獨進行了字體設置
h2 {
font-size: 16px;
}
注意點:
不要忘記加上px
標題有特殊性,需要單獨設置文字大小。
好的,今天就到這里了。晚安~
實際開發中經常會遇到動態操作元素樣式的需求。因此,vue 允許開發者通過 v-bind 屬性綁定指令,為元素動態綁定 class 屬性的值和行內的 style 樣式。
可以通過三元表達式,動態的為元素綁定 class 的類名。示例代碼如下:
<h3 class="thin" :class="isItalic?'italic': ">MyDeep組件</h3>
<button @click="isItalic=!isItalic">Toggle Italic</button>
data() {
return { isItalic: true }
}
.thin{ // 字體變細
font-weight:200;
}
.italic{ // 傾斜字體
font-style: italic;
}
如果元素需要動態綁定多個 class 的類名,此時可以使用數組的語法格式:
<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,
}
}
使用數組語法動態綁定 class 會導致模板結構臃腫的問題。此時可以使用對象語法進行簡化:
<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. 以對象語法綁定內聯的 style
:style 的對象語法十分直觀——看著非常像 CSS,但其實是一個 JavaScript 對象。CSS property 名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case,記得用引號括起來) 來命名:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。