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()方法 ...
随机推荐
- docker学习12-docker快速搭建禅道环境
前言 bug管理系统是每个公司测试团队必备的,当去一个新的公司组建一个测试团队的时候,需快读搭建一套bug管理系统,使用docker搭建禅道就非常方便. 拉取镜像 先拉取zentao镜像,镜像地址ht ...
- 初识V4L2（三）-------分析vivi.c 虚拟视频驱动
1.分配video_device结构体 2.设置 3.注册 video_register_device 分析vivi.c: vivi_init( )//入口函数 vivi_create_instan ...
- 201871010124-王生涛《面向对象程序设计（java）》第四周学习总结
项目 内容 这个作业属于哪个课程 <任课教师博客主页链接>https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 <作业链接地址>http ...
- 201871010136-赵艳强《面向对象程序设计（java）》第六，七周学习总结
201871010136-赵艳强<面向对象程序设计(java)>第六七周学习总结 项目 内容 这个作业属于哪个课程 <任课教师博客主页链接> https://w ...
- C# HTTP系列7 HttpWebRequest.Method属性
系列目录 [已更新最新开发文章,点击查看详细] HttpWebRequest.Method属性,获取或设置请求的方法.用于联系 Internet 资源的请求方法. 默认值为 GET. Syst ...
- SpringBoot集成Spring Security（4）——自定义表单登录
通过前面三篇文章,你应该大致了解了 Spring Security 的流程.你应该发现了,真正的 login 请求是由 Spring Security 帮我们处理的,那么我们如何实现自定义表单登录呢, ...
- oracle数据库表约束、视图、索引—该记录为本人以前微博的文章
一.Oracle 数据库常用操作续关于创建表时创建约束1.创建表的时候增加约束----约束是定义表中的数据应该遵循的规则或者满足的条件----约束是建立在列上的,让某一列或者某几列数据之间有约束--- ...
- layui.dropdown.js
前 在 layui 框架下做了一个小组件,是下拉框功能,当然也可以很好的变成其他组件,前提你会修改. 还需要更多的完善.后期(我也不清楚会是啥时候会优化)
- Salesforce学习之路（二）Profile
如上篇文章所述,针对User来讲,最重要的概念便是Profile和Role,因为Profile于Security息息相关,这是一个合格的产品中十分重要的一环. 何为Profile? 前文所讲--就是一 ...
- Failed to instantiate [org.elasticsearch.client.transport.TransportClient]
Springboot 集成 ElasticSearch,springboot报错如下: Error starting ApplicationContext. To display the auto-c ...