Vue.js v-bind

Vue.js v-bind 添加樣式

範例一:設定單個class

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>6 v-bind</title>
        <style>
          .active{
            color:red;
            font-size: 30px;
          }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-bind:class="{ active: myCheck }">123</div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                   myCheck: true
                }
            });
        </script>
    </body>
</html>

範例二:設定很多個class

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>6 v-bind</title>
        <style>
          .active{
            color:red;
            font-size: 30px;
          }
          .normal{
            color:green;
            font-size: 30px;
          }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-bind:class="{ active: myCheck , normal:myCheck2 }">123</div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                   myCheck: true,
                   myCheck2: false
                }
            });
        </script>
    </body>
</html>

參考:[教學]Vue js快速上手(七)改變樣式的魔術棒v-bind | YOTTA友讀——陪你成長的學習夥伴|跨領域線上學習平台 (yottau.com.tw)