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

 
전재 대상:https://www.cnblogs.com/FGang/p/11251110.html

좋은 웹페이지 즐겨찾기