Vue基础，css样式操作，flex布局，通过操作样式改变字体的大小
- 这是一个用vue.js对css操作完成的实例。
- 当然用了flex简单布局。
一、先创建一个html文件，记得添加vue库文件。
二、创建一盒容器vmdiv，用vue绑定它，测试vue绑定后的插入值text1效果。
三、加入文本框和两个按钮。
四、通过flex排序，让它们三个竖排。比例为文本框占4，按钮占1。
五、测试一下按钮的点击事件。
六、给文本框添加style样式，给它字体大小为16px，并设置一个变量size，让它来控制字的大小，通过点击后，字变大加5，变小减5。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
.main{
width: 300px;
height: 400px;
display: flex;
/* flex布局 */
flex-direction: column;
/* 竖排布局 */
}
.flex1{
flex: 1;
}
.flex4{
flex: 4;
}
</style>
</head>
<body>
<div id="vmdiv">
<div class="main">
<textarea cols="30" rows="10" class="flex4" :style="cssobj"></textarea>
<button class="flex1" @click="btbig">点我变大</button>
<button class="flex1" @click="btsmall">点我变小</button>
</div>
</div>
<script>
var vm = new Vue({
el: "#vmdiv",
data:{
text1: "这是我绑好的vm",
size: 16,
cssobj: {
fontSize: "16px"
}
},
methods: {
btbig: function () {
this.size = this.size + 5;
this.cssobj.fontSize = this.size +"px";
},
btsmall: function () {
this.size = this.size - 5;
this.cssobj.fontSize = this.size +"px";
}
},
})
</script>
</body>
</html>