服务器之家
您的位置： 首页 编程语言 css

Vue基础，css样式操作，flex布局，通过操作样式改变字体的大小

100人浏览   2024-09-26 11:00:27
  • 这是一个用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>

相关推荐