Vue bind class

<style>
    .set1 {
        background-color: yellow;
        color: purple;
    }

    .set2 {
        text-align: center;
        width: 220px;
    }
</style>

<div id="app">
    <button v-bind:class = "{set1:s1, set2:s2}">2. class 속성 적용 버튼</button>
    <p>
        <input type="checkbox" v-model="s1" value="true" />set1 : 버튼색 변경<br />
        <input type="checkbox" v-model="s2" value="true" />set2 : 버튼 width 사이즈 변경<br />
    </P>
</div>
<script type="text/javascript">
var vm = new Vue({
    el: "#app",
    data: {
        s1: false,
        s2: false,
    }
})
</script>

<style>
    .score {
        background-color: rgb(127, 255, 138);
        border: solid 1px black;
    }

    .warning {
        background-color: rgb(255, 0, 76);
        color: purple;
    }

    .warnimage {
        width: 18px;
        height: 18px;
        top: 5px;
        position: relative;
    }
</style>

<div id="example">
    <div>
        score : <input type="number" class="score" v-model.number="score" v-bind:class="info" />
        <img src="images/error.png" class="warnimage" v-show="info.warning" />
    </div>
</div>

</dl>

<script type="text/javascript">
var vm = new Vue({
    el: "#example",
    data: {
        score: 0   //input 요소에 양방향 바인딩되어 있음
    },
    computed: {
        info: function(){
            if(this.score>=0 && this.score<=5){
                return { warning : false }
            }else{
                return { warning : true }
            }
        }
    }
});
</script>