时间煮雨,笔记本性价比排行,3dtouch-天尊小说网,免费小说和新闻发布,聚焦微博热点

频道:最近大事件 日期: 浏览:149
  • 这是一个用vue.js对css操作完结的实例。
  • 当然用了flex简略布局。

一、先创立一个html文件,记住增加vue库文件。

二、创立一盒容器vmdiv,用vue绑定它,测验vue绑定后的刺进值text1作用。

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

四、经过flex排序,让它们三个竖排。份额为文本框占4,按钮占1。

五、测验一下按钮的点击事情。

六、给文本框增加style款式,给它字体巨细为16px,并设置一个变量size,让它来操控字的巨细,经过点击后,字变大加5,变小减5。











.main{
width: 300px;
height: 400px;
display: flex;
/* flex布局 */
flex-direction: column;
/* 竖排布局 */
}
.flex1{
flex: 1;
}
.flex4{
flex: 4;
}











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";
}
},
})




热门
最新
推荐
标签