脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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>

截图

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

您可能感兴趣的文章:

相关文章

  • vue踩坑记录:属性报undefined错误问题

    vue踩坑记录:属性报undefined错误问题

    这篇文章主要介绍了vue踩坑记录:属性报undefined错误问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vant-Dialog 弹出框的使用小结

    vant-Dialog 弹出框的使用小结

    这篇文章主要介绍了vant-Dialog 弹出框的使用小结,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • VUE2实现事件驱动弹窗示例

    VUE2实现事件驱动弹窗示例

    本篇文章主要介绍了VUE2实现事件驱动弹窗示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • vue cli3.0打包上线静态资源找不到路径的解决操作

    vue cli3.0打包上线静态资源找不到路径的解决操作

    这篇文章主要介绍了vue cli3.0打包上线静态资源找不到路径的解决操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue 配置多页面应用的示例代码

    vue 配置多页面应用的示例代码

    这篇文章主要介绍了vue 配置多页面应用的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • 干货!教大家如何选择Vue和React

    干货!教大家如何选择Vue和React

    Vue和React之间如何选择，这篇文章主要为大家详细介绍了Vue和React两者之间的相同之处，教大家该如何进行选择，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • vue移动端微信授权登录插件封装的实例

    vue移动端微信授权登录插件封装的实例

    今天小编就为大家分享一篇vue移动端微信授权登录插件封装的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue传值方式的十二种方法总结

    vue传值方式的十二种方法总结

    这篇文章主要介绍了vue传值方式的十二种方法总结,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序

    利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序

    这篇文章主要介绍了利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • vue-router实现嵌套路由的讲解

    vue-router实现嵌套路由的讲解

    今天小编就为大家分享一篇关于vue-router实现嵌套路由的讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
    2019-01-01

最新评论