<!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>