Vue 实战------v-bind 用法详解

1.可以绑定标签属性

<div id="app">
        <a v-bind:href="url"></a>
    </div>
    <script type="text/javascript">
          var app = new Vue({
              el: '#app',
              data:{
                  url:'https://waimai.baidu.com'
              }
          })
    </script>

2. 还能绑定多个属性

    <div id="app">
        <a v-bind:href="url" v-bind:target="target"></a>
    </div>
    <script type="text/javascript">
          var app = new Vue({
              el: '#app',
              data:{
                  url:'https://waimai.baidu.com',
                  target:'_blank'

              }
          })
    </script>

3. 还能绑定对象了

   <div id="app1">
     <!--在标签里面设置一个对象-->
        <div v-bind:class="{'is-active':isActive}">test</div>
    </div>


    var app1 = new Vue({
              el:'#app',
              data:{
                  isActive:true
              }
     });

或者可以直接绑定了一个对象:

4. 可以绑定了一个数组

这个数组里面可以放对象属性也可以放对象

5. 还可以用三元表达式切换 class

6. 还可以绑定多重属性，可以用来支持浏览器的兼容性

<div v-bind:style="{display:['-webkit-box','-ms-flexbox','flex']}"

它会渲染最后一个被浏览器支持的值

如果浏览器支持不带前缀的 flexbox ,最后会显示 display:flex