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()方法 ...

随机推荐

css 文本属性和字体属性
1.将浮动居中这需要三个盒子 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
python gyp
https://github.com/bnoordhuis/gyp 所以,手动加了这个变量 https://blog.csdn.net/weixin_30576827/article/details/ ...
JS中key-value存取
获取Key 在代码中,遇到需要单独提取对象的key值时可使用 Object.keys(object) object是你需要操作的对象Object.keys()会返回一个存储对象中所有key值的数组获取 ...
USACO Telephone Lines
洛谷 P1948 [USACO08JAN]电话线Telephone Lines https://www.luogu.org/problem/P1948 JDOJ 2556: USACO 2008 Ja ...
workerman docker 运行试用
看到别人项目使用了workerman 作为webserver ,看了下介绍发现此框架还是挺强大的,比较喜欢使用 docker运行软件,所以基于php 7.3 的基础镜像简单使用下环境准备项目使用了 ...
ESA2GJK1DH1K升级篇: STM32远程乒乓升级,基于(Wi-Fi模块AT指令TCP透传方式),MQTT通信控制升级
实现功能概要前面的版本都是,定时访问云端的程序版本,如果版本不一致,然后下载最新的升级文件,实现升级. 这一节,在用户程序里面加入MQTT通信,执行用户程序的时候,通过接收MQTT的升级命令实现升级 ...
rust下根据protobuf的消息名创建对象实例
在C++里面, 我们可以根据一个消息的名称, 动态的创建一个实例 google::protobuf::Descriptor* desc = google::protobuf::DescriptorPo ...
Econ 493 A1 - Fall 2019
Econ 493 A1 - Fall 2019Homework 4Assignment InformationThis assignment is due on Monday November 18 ...
CountDownLatch 源码分析
CountDownLatch 源码分析: 1:CountDownLatch数据结构成员变量 Sync类型对象 private final Sync sync; Sync是继承AQS的一个类,Coun ...
Docker私有云管理平台————Docker Shipyard
一.shipyard中文版安装(CentOS) 注:本文安装操作均在root用户下,安装前需先安装Docker (传送门) 下载所需docker镜像 docker pull rethinkdb doc ...

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

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

随机推荐

热门专题