- 这是一个用vue.js对css操作完成的实例。
- 当然用了flex简单布局。
![dfae4c00cc9cc90c8a535c4e10b9094f.gif](https://img-blog.csdnimg.cn/img_convert/dfae4c00cc9cc90c8a535c4e10b9094f.gif)
一、先创建一个html文件,记得添加vue库文件。
![9e8c14a05f2a72c278677cb3292375da.png](https://i-blog.csdnimg.cn/blog_migrate/78008272ac472f01e1d4cb653c1b1e10.jpeg)
二、创建一盒容器vmdiv,用vue绑定它,测试vue绑定后的插入值text1效果。
![3e22f3644646aba45e202141dd6cd49b.png](https://i-blog.csdnimg.cn/blog_migrate/d75fa29032421fbfdc942541a66cfd29.jpeg)
![c9c78db9a6766d9d6516feacab776ee2.png](https://i-blog.csdnimg.cn/blog_migrate/d0b6011ef856f3b918613379f7b1c4a9.jpeg)
三、加入文本框和两个按钮。
![a6496d04ea6a9390f5b4da486d53c883.png](https://i-blog.csdnimg.cn/blog_migrate/84062af08a6e412376254d48c478002f.jpeg)
![67873180d8678acb473f303560963d4e.png](https://i-blog.csdnimg.cn/blog_migrate/067e9038e5c360bd927103a97f2c1eb4.jpeg)
四、通过flex排序,让它们三个竖排。比例为文本框占4,按钮占1。
![41c10a3c916ada8777bf8b7d5ce458ff.png](https://i-blog.csdnimg.cn/blog_migrate/e60b08f239b27cf4575a2631a65b9510.jpeg)
![c52e7346bfb996216d32cd5df5f66d32.png](https://i-blog.csdnimg.cn/blog_migrate/4f85e7a596cd052585407f6d4dda66ac.jpeg)
五、测试一下按钮的点击事件。
![0520b0daf7d04e574aadbb747e8c2b2d.png](https://i-blog.csdnimg.cn/blog_migrate/9a231a8bfe327c4c13351c59a03285db.jpeg)
![a71df53e00f7fe20a0f2a73ba8191423.gif](https://i-blog.csdnimg.cn/blog_migrate/3867ce26466ea9239bdffbb2ffbbfd14.gif)
六、给文本框添加style样式,给它字体大小为16px,并设置一个变量size,让它来控制字的大小,通过点击后,字变大加5,变小减5。
![c19fc5be1ca385d1a7b3af5d18951f64.png](https://i-blog.csdnimg.cn/blog_migrate/56c7276291ba5465fb02069cb6c597ec.jpeg)
![10b592541eb531619cdf5c479b5df326.png](https://i-blog.csdnimg.cn/blog_migrate/2336ab573f51b6c1c4d8d22a2bf9a0ab.jpeg)
Document
点我变大 点我变小