vue base (3) Binding style

Theoretical knowledge

• Styles also belongs to a label, so the style is consistent with the binding properties of the binding ideas, but somewhat different syntax.
• Style binding two ways
  • Object syntax
    • v-bind: class = '{key1: value1; key2: value2; ....}', calss is provided in key-value pairs, key represents the class name to the tag, with the selected style is used in class selector ; value is a variable declared vue data corresponding to the key, typically boolean type. vue operation is enabled by the class variable.
  • Array syntax
    • v-bind: class = '[value1, value2 ...]', where the value is a variable name vue attribute data set, here as a placeholder. Vue value may be set by a value, the value may be selected in the style.
  • Comparison of two ways. Both are avoided by the property bound by dom js operating property, but is operated by vue variables. The main object syntax used in certain types of agreement exist, the need to control this kind of style is in effect. Higher authority array syntax, you can control the class exists.
• Style binding details
  • Object Binding Binding array and two methods can be mixed, e.g. v-bind: class = '[value1, value2, {key: value3}]'
  • Two ways to simplify use. Because the array is written directly to the target or template in vue, the data appear to be relatively long, you can declare a variable in the data vue, the template is clean. v-bind: class = 'var1', var1 = [value1, value2 ...]
  • If there is a default class, through vue bound class does not override the default class.
• Style binding may be performed by directly binding style, i.e., bound inline style. The syntax and bind the class with a similar effect. In particular, when binding a plurality of styles and style between the operation target coincide, overwrite occurs. For example, the operation pattern A div background color, pattern B also operates this div background color, the two will occur coverage.

practice

• style style

<style type="text/css">
        .active{
            border: 1px, solid;
            background: green;
        }
    </style>

• vue template

<div v-bind:class='{active: isActive}'>样式测试</div> //类似json对象
<button @click='changeStyle'>样式切换</button>

• vue examples

    var app = new Vue({
            el: '#app',
            data:{
                isActive: true 
            },
            methods:{
                changeStyle:function(){
                    this.isActive=!this.isActive; //操作value的值
                }
            }
        })