vue directive v-bind

　　v-bind is used to bind html attributes, and v-bind is usually abbreviated (such as " v-bind:class " can be abbreviated to " :class ");

　　In addition to binding string type variables, v-bind can also support a single JavaScript expression, such as:

1. Execute the operation:

   < div id = "app" > 
       < p v-bind:title = "t1 + ' ' + t2" > HTML attributes cannot be bound with double curly brackets, only v-bind directives can be used </ p > 
   </ div >
   ......
   var vm = new Vue({
       el: '#app',
       data: {
           t1: 'title1',
           t2: 'title2'
       }
   });

2. Execute function:

   < div id = "app" > 
       < p v-bind:title = "getTitle()" > HTML attributes cannot be bound in double curly brackets, only the v-bind directive can be used </ p > 
   </ div >
   ......
   var vm = new Vue({
       el: '#app',
       data: {
           getTitle: function () {
               return 'title content';
           }
       }
   });

    

　　There are three binding methods using v-bind:

1. Object type:

   '{red:isred}'

2. 三目型：'isred?"red":"blue"'
3. 数组型：'[{red:"isred"},{blue:"isblue"}]'