整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
一、先创建一个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小时内与您取得联系。
