CSS文本框里的字_Vue基础,css样式操作,flex布局,通过操作样式改变字的大小...

  • 这是一个用vue.js对css操作完成的实例。
  • 当然用了flex简单布局。
dfae4c00cc9cc90c8a535c4e10b9094f.gif

一、先创建一个html文件,记得添加vue库文件。

9e8c14a05f2a72c278677cb3292375da.png

二、创建一盒容器vmdiv,用vue绑定它,测试vue绑定后的插入值text1效果。

3e22f3644646aba45e202141dd6cd49b.png
c9c78db9a6766d9d6516feacab776ee2.png

三、加入文本框和两个按钮。

a6496d04ea6a9390f5b4da486d53c883.png
67873180d8678acb473f303560963d4e.png

四、通过flex排序,让它们三个竖排。比例为文本框占4,按钮占1。

41c10a3c916ada8777bf8b7d5ce458ff.png
c52e7346bfb996216d32cd5df5f66d32.png

五、测试一下按钮的点击事件。

0520b0daf7d04e574aadbb747e8c2b2d.png
a71df53e00f7fe20a0f2a73ba8191423.gif

六、给文本框添加style样式,给它字体大小为16px,并设置一个变量size,让它来控制字的大小,通过点击后,字变大加5,变小减5。

c19fc5be1ca385d1a7b3af5d18951f64.png
10b592541eb531619cdf5c479b5df326.png

 Document
点我变大 点我变小
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值