본문 바로가기
책/Vue.js 퀵스타트

스타일

추상작업 2020. 11. 20. 20:05

스타일 적용

우선순위

  • 위 > 아래 > 인라인

인라인 스타일

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
    <style>

    </style>
</head>

<body>
    <div id="example">
        <button id="a" v-bind:style="style1" @mouseover.stop="overEvent" @mouseout.stop="outEvent">테스트</button>
    </div>
    <script type="text/javascript">
        var simple1 = new Vue({
            el: "#example",
            data: {
                style1: {
                    backgroundColor: 'aqua',
                    border: 'solid 1px gray',
                    width: '100px',
                    textAlign: 'center'
                }
            },
            methods: {
                overEvent: function(e) {
                    this.style1.backgroundColor = 'purple';
                    this.simple1.color = 'yellow';
                },
                outEvent: function(e) {
                    this.style1.backgroundColor = 'aqua';
                    this.simple1.color = 'black';
                }
            }

        });
    </script>
</body>

</html>

값 하나 하나에 바인딩

<body>
    <div id="example">
        <button id="a" v-bind:style="{backgroundColor : a.bc,border: a.bd, width: a.w + 'px',  textAlign: a.c}" @mouseover.stop="overEvent" @mouseout.stop="outEvent">테스트</button>
    </div>
    <script type="text/javascript">
        var simple1 = new Vue({
            el: "#example",
            data: {
                a: {
                    bc: "yellow",
                    bd: "solid 1px black",
                    w: "100",
                    c: "center"
                }
            },
            methods: {
                overEvent: function(e) {
                    this.a.bc = 'purple';
                },
                outEvent: function(e) {
                    this.a.bc = 'aqua';
                }
            }
        });
    </script>
</body>

여러개의 객체 바인딩

<div id="example">
    <button id="btn1" v-bind:style="[myColor, myLayout]">버튼</button>
</div>
<script>
    var vm = new Vue({
        el : '#example',
        data : {
            myColor : { backgroundColor : 'purple', color: 'yellow'},
            myLayout : { width : '150px', height:'80px',textAlign:'center'}
        }
    });
</script>

CSS 클래스 바인딩

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
    <style>
        .set1 {
            background-color: aqua;
            color: purple;
        }
        
        .set2 {
            text-align: center;
            width: 120px;
        }
        
        .set3 {
            border: sandybrown dashed 1px;
        }
    </style>
</head>

<body>
    <div id="example">
        <button id="btn1" v-bind:class="{set1 : s1, set2: s2, set3 : s3}">버튼1</button>
        <p>
            <input type="checkbox" v-model="s1" value="true" />디지안1<br/>
            <input type="checkbox" v-model="s2" value="true" />디지안2<br/>
            <input type="checkbox" v-model="s3" value="true" />디지안3
        </p>
    </div>
    <script type="text/javascript">
        var simple1 = new Vue({
            el: "#example",
            data: {
                s1: false,
                s2: false,
                s3: false
            }
        });
    </script>
</body>

</html>

 

<body>
    <div id="example">
        <button id="btn1" v-bind:class="mystyle">버튼1</button>
        <p>
            <input type="checkbox" v-model="mystyle.set1" value="true" />디지안1<br/>
            <input type="checkbox" v-model="mystyle.set2" value="true" />디지안2<br/>
            <input type="checkbox" v-model="mystyle.set3" value="true" />디지안3
        </p>
    </div>
    <script type="text/javascript">
        var simple1 = new Vue({
            el: "#example",
            data: {
                mystyle: {
                    set1: false,
                    set2: false,
                    set3: false
                }
            }
        });
    </script>
</body>

계산형 속성, 메서드를 이용한 스타일 적용

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
    <style>
        .score {
            border: solid 1px black;
        }
        
        .warning {
            background-color: orange;
            color: purple;
        }
        
        .warnimage {
            width: 18px;
            height: 18px;
            top: 5px;
            position: relative;
        }
    </style>
</head>

<body>
    <div id="example">
        <div>
            <p>1부터 100까지만 입력 가능합니다.</p>
            <div>
                점수 : <input type="text" class="score" v-model="score" v-bind:class="info">
                <img src="" alt="에러" class="warnimage" v-show="info.warning">
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var simple1 = new Vue({
            el: "#example",
            data: {
                score: 0
            },
            computed: {
                info: function() {
                    if (this.score >= 1 && this.score <= 100) {
                        return {
                            warning: false
                        };
                    }

                    return {
                        warning: true
                    };
                }
            }

        });
    </script>
</body>

</html>

컴포넌트에서의 스타일 적용

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
    <style>
        .boxcolor {
            background-color: orange;
        }
        
        .center {
            width: 200px;
            height: 200px;
            line-height: 100px;
            text-align: center;
            border: 1px solid gray;
        }
    </style>
</head>

<body>
    <div id="example">
        <center-box :class="boxstyle"></center-box>
    </div>
    <script type="text/javascript">
        Vue.component('center-box', {
            template: '<div class="center">중앙에 위치</div>'
        });
        var simple1 = new Vue({
            el: "#example",
            data: {
                boxstyle: {
                    boxcolor: true
                }
            }
        });
    </script>
</body>

</html>

TodoList 예제

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }
        
        ul {
            margin: 0;
            padding: 0;
        }
        
        ul li {
            cursor: pointer;
            position: relative;
            padding: 8px;
            padding-left: 40px;
            background: #eee;
            font-size: 14px;
            transition: .2s;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        ul li:hover {
            background: #ddd;
        }
        
        ul li.checked {
            background: #bbb;
            color: #fff;
            text-decoration: line-through;
        }
        
        ul li.checked::before {
            content: '';
            position: absolute;
            border-color: #fff;
            border-style: solid;
            border-width: 0px 1px 1px 0px;
            top: 10px;
            left: 16px;
            transform: rotate(45deg);
            height: 8px;
            width: 8px;
        }
        
        .close {
            position: absolute;
            right: 0;
            top: 0;
            padding: 12px 16px;
        }
        
        .close:hover {
            background-color: #f44336;
            color: #fff;
        }
        
        .header {
            background-color: purple;
            padding: 30px;
            color: yellow;
            text-align: center;
        }
        
        .header::after {
            content: "";
            display: table;
            clear: both;
        }
        
        .input {
            border: none;
            width: 75%;
            height: 35px;
            padding: 10px;
            float: left;
            font-size: 16px;
        }
        
        .addbutton {
            padding: 10px;
            width: 25%;
            height: 35px;
            background: #d9d9d9;
            color: #555;
            float: left;
            text-align: center;
            font-size: 13px;
            cursor: pointer;
            transition: .3s;
        }
        
        .addbutton:hover {
            background: #bbb;
        }
        
        .completed {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <div id="todolistapp">
        <div id="header" class="header">
            <h2>Todo List App</h2>
            <input type="text" class="input" id="task" placeholder="입력 후 엔터!" v-model.trim="todo" @keyup.enter="addTodo" />
            <span class="addbutton" @click="addTodo">추 가</span>
        </div>
        <ul id="todolist">
            <li v-for="a in todolist" :class="checked(a.done)" @click="doneToggle(a.id)">
                <span>{{ a.todo }}</span>
                <span v-if="a.done">완료</span>
                <span class="close" @click.stop="deleteTodo(a.id)">&#x00D7;</span>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var simple1 = new Vue({
            el: "#todolistapp",
            data: {
                todo: "",
                todolist: [{
                    id: 1,
                    todo: "영화보기",
                    done: false
                }, {
                    id: 2,
                    todo: "주말산책",
                    done: true
                }, {
                    id: 3,
                    todo: "ES6 학습",
                    done: false
                }, {
                    id: 4,
                    todo: "잠실 야구장",
                    done: false
                }]
            },
            methods: {
                checked: function(done) {
                    if (done) return {
                        checked: true
                    };
                    else return {
                        checked: false
                    };
                },
                addTodo: function(e) {
                    if (this.todo.trim() !== "") {
                        this.todolist.push({
                            todo: this.todo.trim(),
                            done: false
                        });
                        this.todo = "";
                    }
                },
                deleteTodo: function(id) {
                    var index = this.todolist.findIndex(function(item) {
                        return item.id === id;
                    });
                    this.todolist.splice(index, 1);
                },
                doneToggle: function(id) {
                    var index = this.todolist.findIndex(function(item) {
                        return item.id === id;
                    });
                    this.todolist[index].done = !this.todolist[index].done;
                }
            }

        });
    </script>
</body>

</html>

'책 > Vue.js 퀵스타트' 카테고리의 다른 글

ECMAScript 2015  (0) 2020.11.22
컴포넌트 기초  (0) 2020.11.21
이벤트 처리  (0) 2020.11.20
Vue 인스턴스  (0) 2020.11.20
Vue.js 기초  (0) 2020.11.19

'책/Vue.js 퀵스타트' Related Articles

티스토리툴바