- 这是一个用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="http://img.studyofnet.comhttps://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>
,
