v-bind 及 class 與 style 綁定

• v-bind的作用主要是動態更新 html元素上的屬性
  *

代碼鏈接在這兒!!

class的綁定

設置一個對象,可以動態的切換 class

• e.g. v-bind: class="{'active': isActive}"
  *

代碼鏈接在這兒!!

• 對象可以有多個鍵值對
• 可以使用data
• 也可以使用computed
• 也可以使用 methods

數組語法

• 需要應用多個 class 的時候可以使用數組語法,給:class 綁定數組, 應用一個class 列表

<div id='#app'>
    <div :class="[activeCls, errorCls]"></div>
</div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            activeCls: 'active',
            errorCls: 'error'
        }
    })
</script>

*也可以利用三元表達式動態切換 class 的值

<div id='app' :class="[isActive ? activeCls: '', errCls]"></div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            activeCls: 'active',
            errCls: 'error'
        }
    })
</script>

• 同時也可以在數組中使用對象語法

<div id="app" :class="[{'active': isActive}, errCls]"></div>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isActive: true,
            errCls: 'error'
        }
    })
</script>

• 與對象綁定的方法一樣, 可以使用data, computed 和 methods 三種方法.
  *

代碼鏈接在這兒!!

• 列表中的東西, 可以是對應能夠取值的時候的鍵值對的鍵, 也可以是對應取值的時候簡直對中值
  *

代碼鏈接在這兒!!

組件上的使用

• 可以在自定義的組件上使用 class
  • 首先聲明一個組件
    • 比如使用全局注冊

    Vue.component('my-component', {
        template: '<p class="article">一些文本</p>'
    })
    

    • 在組件上使用:class

    <div id="app">
        <my-component :class="{'active': isActive}"></my-component>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                isActive: true
            }
        })
    </script>
    

style 的綁定

• style 的綁定和 class 的綁定十分類似
• CSS 屬性
  • html 中使用的是 kebab-case
  • Vue 中使用的是 camelCase