这篇文章主要讲解了“vue中的五种el-button类型和三种css格式是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“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
vue中的样式
常见的样式 :
-
① : 行内样式
-
② : 在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格式是什么这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是云搜网，小编将为大家推送更多相关知识点的文章，欢迎关注！
