vue中的五種el-button類型和三種css格式是什么
這篇文章主要講解了“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格式是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是蝸牛博客，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：niceseo99@gmail.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
版權聲明：蝸牛博客如無特殊標注，文章均為來源于網絡，轉載時請以鏈接形式注明文章出處。
評論