您的位置 首页 > 数码极客

【html设置字体大小】一个Vue.js实例控制字变大变小,含样式操作,flex布局。「603」

这是使用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=";></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 () { = + 5; = +"px"; }, btsmall: function () { = - 5; = +"px"; } }, }) </script> </body> </html>

关于作者: admin

无忧经验小编鲁达,内容侵删请Email至wohenlihai#qq.com(#改为@)

热门推荐