vue学习11：绑定样式

1、class的对象绑定方法

<div id="app">
        <span :class="{activated: isActivated}" 
              @click = "HandleSpanClick">
              {{message}}
        </span>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello',
                isActivated: false;
            },
            methods: {
                HandleSpanClick () {
                    this.isActivated = !this.isActivated;
                }
            }
        })
</script> 

2、class的数组绑定方法

<div id="app">
        <span :class="[activated]" 
                @click = "HandleSpanClick">
                {{message}}
        </span>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello',
                activated: ''
            },
            methods: {
                HandleSpanClick () {
                    this.activated = this.activated === '' ?'activated' : '';
                }
            }
        })
    </script>

3、style的对象绑定方法

<div id="app">
            <!-- //这里的对象，不用加{}.是data中的数据 -->
            <span :style="Obj" 
                    @click = "HandleSpanClick">
                    {{message}}
            </span>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    message: 'Hello',
                    Obj: {
                        color: 'red'
                    }
                },
                methods: {
                    HandleSpanClick () {
                        this.Obj.color = this.Obj.color === 'black' ? 'red' : 'black';
                    }
                }
            })
        </script>

4、style的数组绑定方法

<div id="app">
            <!-- //这里的对象，不用加{}.是data中的数据 -->
            <span :style="[Obj, font]" 
                    @click = "HandleSpanClick">
                    {{message}}
            </span>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    message: 'Hello',
                    Obj: {
                        color: 'black'
                    },
                    font: {
                        fontSize: '20px'
                    }
                },
                methods: {
                    HandleSpanClick () {
                        this.Obj.color = this.Obj.color === 'black' ? 'red' : 'black';
                    }
                }
            })
        </script>