脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue el-button五种类型,三种css格式

vue中(el-button的五种类型,三种css格式)

 更新时间：2022年07月20日 09:20:58   作者：练过几年代码，有备而来  
这篇文章主要介绍了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 style="margin: 20px 0">
    <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>

截图

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • iview Upload组件多个文件上传的示例代码

    iview Upload组件多个文件上传的示例代码

    这篇文章主要介绍了iview Upload组件多个文件上传的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Vue3 setup添加name的方法步骤

    Vue3 setup添加name的方法步骤

    如果你在 vue3 开发中使用了语法的话,对于组件的name属性,需要做一番额外的处理,下面这篇文章主要给大家介绍了关于Vue3 setup添加name的相关资料,需要的朋友可以参考下
    2022-11-11
  • vue.js 实现点击展开收起动画效果

    vue.js 实现点击展开收起动画效果

    这篇文章主要介绍了vue.js 实现点击展开收起动画效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • vue异步请求数据重新渲染方式

    vue异步请求数据重新渲染方式

    这篇文章主要介绍了vue异步请求数据重新渲染方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-01-01
  • vue鼠标hover(悬停)改变background-color移入变色问题

    vue鼠标hover(悬停)改变background-color移入变色问题

    这篇文章主要介绍了vue鼠标hover(悬停)改变background-color移入变色问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • Vue实现typeahead组件功能(非常靠谱)

    Vue实现typeahead组件功能(非常靠谱)

    本文给大家分享通过Vue写一个挺靠谱的typeahead组件功能，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
    2017-08-08
  • Vue2.0子同级组件之间数据交互方法

    Vue2.0子同级组件之间数据交互方法

    下面小编就为大家分享一篇Vue2.0子同级组件之间数据交互方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue中使用this.$set()如何新增数据,更新视图

    Vue中使用this.$set()如何新增数据,更新视图

    这篇文章主要介绍了Vue中使用this.$set()实现新增数据,更新视图方式。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-06-06
  • Vue2.0脚手架搭建

    Vue2.0脚手架搭建

    这篇文章介绍了使用vue-cli搭建脚手架的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-03-03
  • vue中的router-view组件的使用教程

    vue中的router-view组件的使用教程

    这篇文章主要介绍了vue中的router-view组件的使用教程，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-10-10

最新评论