这篇文章主要讲解了“vue中的五种el-button类型和三种css格式是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue中的五种el-button类型和三种css格式是什么”吧!
在写一个系统的css文件的时候,发现了不同类型的button的初始颜色不同,为了完美的使button的颜色和背景的颜色相映照,就去搜了一下,小做总结,为以后的使用做准备。
<div>
<el-button><span>默认按钮</span></el-button>
<el-button type="primary"><span>主要按钮</span></el-button>
<el-button type="success"><span>成功按钮</span></el-button>
<el-button type="info"><span>信息按钮</span></el-button>
<el-button type="warning"><span>警告按钮</span></el-button>
<el-button type="danger"><span>危险按钮</span></el-button>
</div>
<div >
<el-button><span>朴素按钮</span></el-button>
<el-button type="primary"><span>主要按钮</span></el-button>
<el-button type="success"><span>成功按钮</span></el-button>
<el-button type="info"><span>信息按钮</span></el-button>
<el-button type="warning"><span>警告按钮</span></el-button>
<el-button type="danger"><span>危险按钮</span></el-button>
</div>
<div>
<el-button round><span>圆形按钮</span></el-button>
<el-button type="primary" round><span>主要按钮</span></el-button>
<el-button type="success" round><span>成功按钮</span></el-button>
<el-button type="info" round><span>信息按钮</span></el-button>
<el-button type="warning" round><span>警告按钮</span></el-button>
<el-button type="danger" round><span>危险按钮</span></el-button>
</div>
需要的话自取,如果说要记的话,可以记一下下面这几点。
a.round设置圆边按钮
b.
默认白
主要蓝 primary
成功绿 success
信息灰 info
警告橘黄 warning
危险红 danger
常见的样式 :
① : 行内样式
② : 在style中书写样式
使用v-bind给class设置一个数组样式
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/vue-2.4.0.js"></script>
<style>
.red {
color: salmon;
}
.size {
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<div :class="['red','size']">我是一个div</div>
</div>
<script>
new Vue({
el: "#app"
})
</script>
</body>
</html>
截图
使用三元运算符来控制样式
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/vue-2.4.0.js"></script>
<style>
.red {
color: salmon;
}
.size {
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<div :class="flag?'size':'red'">我是一个div</div>
</div>
<script>
new Vue({
el: "#app",
data: {
flag: true
}
})
</script>
</body>
</html>
截图
当flag 为true时
当flag 为false时
通过点击事件改变div的颜色 , 大小 , 背景颜色
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/vue-2.4.0.js"></script>
<style>
.red {
color: salmon;
}
.size {
font-size: 20px;
}
.back {
background-color: rgb(175, 244, 96);
}
</style>
</head>
<body>
<div id="app">
<div :class="classObj">我是一个div</div>
<button @click="changeStyle">点击我</button>
</div>
<script>
new Vue({
el: "#app",
data: {
classObj: {
'red': true,
'size': true,
'back': true
}
},
methods: {
changeStyle() {
this.classObj.red = !this.classObj.red,
this.classObj.size = !this.classObj.size,
this.classObj.back = !this.classObj.back
}
}
})
</script>
</body>
</html>
截图
感谢各位的阅读,以上就是“vue中的五种el-button类型和三种css格式是什么”的内容了,经过本文的学习后,相信大家对vue中的五种el-button类型和三种css格式是什么这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。