vue动态更改css值：Vue基础css样式操作flex布局
vue动态更改css值：Vue基础css样式操作flex布局五、测试一下按钮的点击事件。六、给文本框添加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://img.aigexing.comhttps://cdn.st
- 这是一个用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://img.aigexing.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>
