整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
一、先創建一個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小時內與您取得聯系。
