Vue 动态控制页面中按钮是否显示和样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="@author:F_Gang @date2019-07-26 @Describe:页面中动态显示按钮"/>

    <title>Title</title>

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <style>

        .el-col{

            text-align: center;

            margin: 5px 0;

        }

    </style>

</head>

<body>

<div id="app">

    <h2 align="center">{{title}}</h2>

    <el-row>

        <el-col :span="24">

            <template v-for="(item,index) in btnAttribute">

                <el-button v-if="item.btnName==='默认按钮'" :class="item.btnClass">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='主要按钮'" :class="item.btnClass">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='成功按钮'" :class="item.btnClass">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='信息按钮'" :class="item.btnClass">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='警告按钮'" :class="item.btnClass">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='危险按钮'" :class="item.btnClass">{{item.btnName}}</el-button>

            </template>

        </el-col>

        <el-col :span="24">

            <template v-for="(item,index) in btnAttribute">

                <el-button v-if="item.btnName==='默认按钮'" :class="item.btnClass" :round="item.round">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='主要按钮'" :class="item.btnClass" :round="item.round">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='成功按钮'" :class="item.btnClass" :round="item.round">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='信息按钮'" :class="item.btnClass" :round="item.round">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='警告按钮'" :class="item.btnClass" :round="item.round">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='危险按钮'" :class="item.btnClass" :round="item.round">{{item.btnName}}</el-button>

            </template>

        </el-col>

        <el-col :span="24">

            <template v-for="(item,index) in btnAttribute">

                <el-button v-if="item.btnName==='默认按钮'" :class="item.btnClass" :round="item.round">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='主要按钮'" :class="item.btnClass" :round="item.round">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='成功按钮'" :class="item.btnClass" :round="item.round">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='信息按钮'" :class="item.btnClass" :round="item.round">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='警告按钮'" :class="item.btnClass" :round="item.round">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='危险按钮'" :class="item.btnClass" :round="item.round">{{item.btnName}}</el-button>

            </template>

        </el-col>

        <el-col :span="24">

            <template v-for="(item,index) in btnAttribute">

                <el-button v-if="item.btnName==='默认按钮'" :class="item.btnClass" :icon="item.icon" :round="item.round">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='主要按钮'" :class="item.btnClass" :icon="item.icon" :round="item.round">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='成功按钮'" :class="item.btnClass" :icon="item.icon" :round="item.round">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='信息按钮'" :class="item.btnClass" :icon="item.icon" :round="item.round">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='警告按钮'" :class="item.btnClass" :icon="item.icon" :round="item.round">{{item.btnName}}</el-button>

                <el-button v-if="item.btnName==='危险按钮'" :class="item.btnClass" :icon="item.icon" :round="item.round">{{item.btnName}}</el-button>

            </template>

        </el-col>

        <el-col :span="24">

            <template v-for="(item,index) in btnAttribute">

                <el-button v-if="item.btnName==='默认按钮'" :size="item.btnSize" :icon="item.isdirection?'':item.icon" :class="item.btnClass">{{item.btnName}}<i v-if="item.isdirection" :class="item.icon"></i></el-button>

                <el-button v-if="item.btnName==='主要按钮'" :size="item.btnSize" :icon="item.isdirection?'':item.icon" :class="item.btnClass">{{item.btnName}}<i v-if="item.isdirection" :class="item.icon"></i></el-button>

                <el-button v-if="item.btnName==='成功按钮'" :size="item.btnSize" :icon="item.isdirection?'':item.icon" :class="item.btnClass">{{item.btnName}}<i v-if="item.isdirection" :class="item.icon"></i></el-button>

                <el-button v-if="item.btnName==='信息按钮'" :size="item.btnSize" :icon="item.isdirection?'':item.icon" :class="item.btnClass">{{item.btnName}}<i v-if="item.isdirection" :class="item.icon"></i></el-button>

                <el-button v-if="item.btnName==='警告按钮'" :size="item.btnSize" :icon="item.isdirection?'':item.icon" :class="item.btnClass">{{item.btnName}}<i v-if="item.isdirection" :class="item.icon"></i></el-button>

                <el-button v-if="item.btnName==='危险按钮'" :size="item.btnSize" :icon="item.isdirection?'':item.icon" :class="item.btnClass">{{item.btnName}}<i v-if="item.isdirection" :class="item.icon"></i></el-button>

            </template>

        </el-col>

    </el-row>

</div>

</body>

</html>

<script>

        window.document.title = '动态显示页面中的按钮';

        /**

         * jquery 初始化三种方式

         * 第一种：

         *      $(function () {

         *

         *      });

         * 第二种：

         *      jQuery(function ($) {

         *

         *      });

         * 第三种：

         *      $(document).ready(function () {

         *

         *      });

         */

        $(function () {

            new Vue({

                data:{

                    title:'This is the dynamic binding button event demo',

                    btnAttribute: [

                        {

                            btnName:'默认按钮',

                            btnClass:'default',

                            icon:"el-icon-search",

                            btnSize:"small",

                            round:true,

                            isdirection:false,

                        },

                        {

                            btnName:'主要按钮',

                            btnClass:'el-button--primary',

                            icon:"el-icon-search",

                            btnSize:"medium",

                            round:false,

                            isdirection:true,

                        },

                        {

                            btnName:'成功按钮',

                            btnClass:'el-button--success',

                            icon:"el-icon-search",

                            btnSize:"mini",

                            round:true,

                            isdirection:false,

                        },

                        {

                            btnName:'信息按钮',

                            btnClass:'el-button--info',

                            icon:"el-icon-search",

                            btnSize:"small",

                            round:false,

                            isdirection:true,

                        },

                        {

                            btnName:'警告按钮',

                            btnClass:'el-button--warning',

                            icon:"el-icon-upload el-icon--right",

                            btnSize:"medium",

                            round:true,

                            isdirection:true,

                        },

                        {

                            btnName:'危险按钮',

                            btnClass:'el-button--danger',

                            icon:"el-icon-search",

                            btnSize:"",

                            round:true,

                            isdirection:true,

                        }

                    ]

                }

            }).$mount('#app');

        });

</script>

Vue 动态控制页面中按钮是否显示和样式的更多相关文章

vue基于页面中按钮权限控制
main.js // 权限 /** 权限指令,对按钮权限的控制 **/ Vue.directive('allow', { bind: function(el, binding) { // 通过当前按钮 ...
vue项目页面切换到默认显示顶部
页面切换到默认显示顶部方法一使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样. vue-router 能做到,而且更好,它让你可以自定义路由切换时页 ...
使用C#模拟ASP.NET页面中按钮点击
c# 模拟Asp.net页面中的某个按钮的点击,向web服务器发出请求主要就组织要提交的数据,然后以post方式提交. 假设我们有如下的网页 1 <% @ Page Language = &q ...
页面中 json 格式显示数据
在页面中,有时候我们需要的不仅仅是将数据显示出来,而且要以以 json 的格式显示数据,如显示接口的时候我们需要如下显示这个时候,主要用到了 <pre> 标签 $.get(" ...
JSP页面中的时间显示问题
在JSP页面中往往要将时间显示为指定格式的,如果传入的是Date类型很好解决 <fmt:formatDate value="${orderTime}" pattern=&qu ...
vue页面中图片不显示解决
在做新版组态界面的时候,用vue框架实现,在配置页面图片的时候发现有一张图片明明页面输入的路径是对的可是图片就是不显示出来现象: network页面资源也不报错,而且状态码竟然还是200,点prev ...
Vue单页面中进行业务数据的上报
为什么要在标题里加上一个业务数据的上报呢,因为在咱们前端项目中,可上报的数据维度太多,比如还有性能数据.页面错误数据.console捕获等.这里我们只讲解业务数据的埋点. 业务数据的上报主要分为: 各 ...
在Silverlight宿主html页面添加按钮无法显示
在建silverlight应用程序时宿主html中嵌入的silverlight时出现的问题: 预想效果: 实际效果: silverlight填满整个page的所以无法显示html中其他的控件解决办法 ...
vue同一页面中拥有两个表单时，验证问题
问题:如果vue的同一个页面拥有两个表单.验证第一个表单时没有通过就切换到第二个,那么第二个表单会出现验证错误的信息我们可以通过为两个表单添加ref属性之后在通过调用resetFields()方法 ...

随机推荐

qt需求
1.登录框账号密码复杂度判断 2.监控权限认证 (5分钟必须锁定,退回登录状态)--b/s 3.exe 嵌入exe (什么时间触发了什么消息,任何消息触发都可以,日志文件zlog,5分钟没有写 ...
201871010135-张玉晶《面向对象程序设计（java）》第十周学习总结
201871010135-张玉晶<面向对象程序设计(java)>第十周学习总结项目内容这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...
python函数中的不定长参数
python自定义函数中有两中不定长参数,第一种是*name,第二种是**name.加了星号 * 的参数会以元组(tuple)的形式导入,存放所有未命名的变量参数.加了两个星号 ** 的参数会以字典的 ...
02-人脸识别-基于MTCNN，框选人脸区域-detect_face
(本系列随笔持续更新) 这部分代码是基于参考中的链接,修改后适用于TensorFlow1.6.0版本的代码.由于TensorFlow的频繁更新,所以不一定支持后续新或者就版本,特此说明. 程序的最初版 ...
Linux服务器惨遭挖矿
昨天为了协助客户测试业务,帮客户开通了一台云主机,因为是测试环境所以密码设置的很简单:1qaz@WSX,今天登陆的是否发现密码认证不通过了,确定机器是被黑掉了,估计多半是被国外小哥入侵挖矿了,记录 ...
hzoi欢乐时刻（持续更新）
%%NC哥 %%Dybala %%cbx吐露(bei ji can)真相 %%skyh×2 不愿透露姓名的群众无意间发现惊人秘密, skyh默默坦白真相, 这究竟是人性的沦丧还是道德的泯灭? %%kx ...
java常量池-字符串常量池、class常量池和运行时常量池
原文链接:http://tangxman.github.io/2015/07/27/the-difference-of-java-string-pool/ 在java的内存分配中,经常听到很多关于常量 ...
IIS上传文件大小限制和上传时间限制
1.打开某一发布网站的配置编辑器 2.设置上传时间限制 3.设置上传文件大小限制另一种方法: 直接在网站根目录建一个web.config文件 <?xml version="1.0&q ...
在 QML 中使用 C++ 类和对象
Qt Quick 技术的引入,使得你能够快速构建 UI ,具有动画.各种绚丽效果的 UI 都不在话下.但它不是万能的,也有很多局限性,原来 Qt 的一些技术,比如低阶的网络编程如 QTcpSocket ...
jq数字翻页效果，随机数字显示，实现上下翻动效果
最近在做一个项目,需要实时展示一串数字,要有类似于日历翻页的效果,在网上找寻了一番,发现dataStatistics这个插件http://www.jq22.com/jquery-info8141能实现 ...

Vue 动态控制页面中按钮是否显示和样式

Vue 动态控制页面中按钮是否显示和样式的更多相关文章

随机推荐

热门专题