L-Soft/index_vue_js.html

## index_vue_js.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <title>Vue, Example</title>
</head>
<body>
    <div id="app" class="container">
        <h1 class="h1" v-once v-text="message"></h1>
        <div class="btn-group-lg" role="group">
            <button type="button" v-on:click="btnClick" class="btn-lg btn-primary">v-show</button>
            <button type="button" v-on:click="btnClick" class="btn-lg btn-success">v-if</button>
            <button type="button" @click="btnClick" class="btn-lg btn-info">v-else-if</button>
            <button type="button" @click="btnClick" class="btn-lg btn-warning">v-else</button>
        </div>
        <br>
        <div v-show="btn.vshow" class="well well-lg">v-show, {{message}}</div>
        <div v-if="btn.vif" class="well well-lg">v-if, {{message}}</div>
        <div v-else-if="btn.velseif" class="well well-lg">v-else-if, {{message}}</div>
        <div v-else class="well well-lg">v-else, {{message}}</div>
        <div>
            <input type="text" class="form-control" placeholder="ID" v-model="userInfo.id" @keyup.enter="keyborad">
            <input type="text" class="form-control" placeholder="E-Mail" v-model="userInfo.email" @keyup.enter="keyborad">
        </div>
        <br>
        <h1>Table, v-for</h1>
        <table class="table table-striped table-dark">
            <thead>
            <tr>
                <th>1 동</th>
                <th>2 동</th>
                <th>3 동</th>
                <th>4 동</th>
                <th>5 동</th>
            </tr>
            </thead>
            <tbody>
                <template v-for="items in tableData">
                    <tr>
                        <td v-for="(item, index) in items">{{item}}, {{index}}</td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hello, Vue.js",
                btn: {
                    "vshow": false,
                    "vif": false,
                    "velseif": false
                },
                userInfo: {
                    id: "",
                    email: ""
                }
                // 데이터 생성, 자바스크립트에서 2차원 배열이 존재하지 않음.
                ,tableData: (() => {
                    let data = [],
                        len = 5,
                        iCnt = 0,
                        jCnt = 0;

                    for (iCnt = 0; iCnt < len; iCnt++) {
                        data[iCnt] = [];
                        for (jCnt = 0; jCnt < len; jCnt++) {
                            data[iCnt][jCnt] = `${iCnt}0${jCnt}호`;
                        }
                    }
                    return data;
                })()
            },
            methods: {
                btnClick: function (currentItem) {
                    this.btn.vshow = false;
                    this.btn.vif = false;
                    this.btn.velseif = false;

                    const btnName = (() => {
                        if (currentItem && currentItem.srcElement && currentItem.srcElement.innerText) {
                            return currentItem.srcElement.innerText.split("-").join("");
                        }
                        return "";
                    })();

                    this.message = btnName;

                    if (this.btn[btnName] !== undefined && this.btn[btnName] !== null) {
                        this.btn[btnName] = true;
                    }
                },
                keyborad: function () {
                    console.log(`ID: ${this.userInfo.id}, E-Mail: ${this.userInfo.email || ""}`);
                }
            }
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
	<title>Vue, Example</title>
	</head>
	<body>
	<div id="app" class="container">
	<h1 class="h1" v-once v-text="message"></h1>
	<div class="btn-group-lg" role="group">
	<button type="button" v-on:click="btnClick" class="btn-lg btn-primary">v-show</button>
	<button type="button" v-on:click="btnClick" class="btn-lg btn-success">v-if</button>
	<button type="button" @click="btnClick" class="btn-lg btn-info">v-else-if</button>
	<button type="button" @click="btnClick" class="btn-lg btn-warning">v-else</button>
	</div>
	<br>
	<div v-show="btn.vshow" class="well well-lg">v-show, {{message}}</div>
	<div v-if="btn.vif" class="well well-lg">v-if, {{message}}</div>
	<div v-else-if="btn.velseif" class="well well-lg">v-else-if, {{message}}</div>
	<div v-else class="well well-lg">v-else, {{message}}</div>
	<div>
	<input type="text" class="form-control" placeholder="ID" v-model="userInfo.id" @keyup.enter="keyborad">
	<input type="text" class="form-control" placeholder="E-Mail" v-model="userInfo.email" @keyup.enter="keyborad">
	</div>
	<br>
	<h1>Table, v-for</h1>
	<table class="table table-striped table-dark">
	<thead>
	<tr>
	<th>1 동</th>
	<th>2 동</th>
	<th>3 동</th>
	<th>4 동</th>
	<th>5 동</th>
	</tr>
	</thead>
	<tbody>
	<template v-for="items in tableData">
	<tr>
	<td v-for="(item, index) in items">{{item}}, {{index}}</td>
	</tr>
	</template>
	</tbody>
	</table>
	</div>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
	<script type="text/javascript">
	var app = new Vue({
	el: "#app",
	data: {
	message: "Hello, Vue.js",
	btn: {
	"vshow": false,
	"vif": false,
	"velseif": false
	},
	userInfo: {
	id: "",
	email: ""
	}
	// 데이터 생성, 자바스크립트에서 2차원 배열이 존재하지 않음.
	,tableData: (() => {
	let data = [],
	len = 5,
	iCnt = 0,
	jCnt = 0;

	for (iCnt = 0; iCnt < len; iCnt++) {
	data[iCnt] = [];
	for (jCnt = 0; jCnt < len; jCnt++) {
	data[iCnt][jCnt] = `${iCnt}0${jCnt}호`;
	}
	}
	return data;
	})()
	},
	methods: {
	btnClick: function (currentItem) {
	this.btn.vshow = false;
	this.btn.vif = false;
	this.btn.velseif = false;

	const btnName = (() => {
	if (currentItem && currentItem.srcElement && currentItem.srcElement.innerText) {
	return currentItem.srcElement.innerText.split("-").join("");
	}
	return "";
	})();

	this.message = btnName;

	if (this.btn[btnName] !== undefined && this.btn[btnName] !== null) {
	this.btn[btnName] = true;
	}
	},
	keyborad: function () {
	console.log(`ID: ${this.userInfo.id}, E-Mail: ${this.userInfo.email \|\| ""}`);
	}
	}
	});
	</script>
	</body>
	</html>