Vue 동적 제어 페이지의 버튼 표시 및 스타일
38508 단어 javascriptui프런트엔드
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
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
개별 마크다운 블로그 페이지 만들기 - 13부이를 통해 개별 마크다운 기반 블로그 게시물 작성을 시작할 수 있습니다! 이 기사를 따르려면 을 시작점으로 사용하십시오. blog 페이지 디렉토리에 동적 페이지를 생성하여 시작할 수 있습니다. 이 파일[slug].j...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.