v-bind动态绑定

v-bind动态绑定元素

v-bind

<div id="app">
    <a v-bind:href="aHref">百度一下</a>
</div>

href在Vue对象里面data数据中声明了一个aHref地址的

const app = new Vue({
      el: '#app',
      data: { 
        aHref: 'http://www.baidu.com',
      }
    })

v-bind动态绑定

绑定class且后面跟对象

一：可以直接通过{}绑定一个类

<h2 :class="{‘active’: isActive}">Hello World</h2>

二：可以通过判断，传入多个值

<h2 :class="{‘active’: isActive, ‘line’: isLine}">Hello World</h2>

三：和普通的类同时存在，并不冲突

<h2 class="title" :class="{‘active‘: isActive, ’line‘: isLine}">Hello World</h2>

四：如果过于复杂，可以放在一个methods或者computed中

<h2 class="title" :class="getClasses()">Hello World</h2>

注：classes是一个计算属性

绑定class且后面跟数组

一：可以直接通过[]绑定一个类

<h2 :class="[‘active’]">Hello World</h2>

二：也可以传入多个值

<h2 :class="[‘active’,‘line’]">Hello World</h2>

三：和普通的类同时存在，并不冲突

   <h2 class="title" :class="[‘active‘, ’line‘]">Hello World</h2>

四：如果过于复杂，可以放在一个methods或者computed中

<h2 class="title" :class="classes">Hello World</h2>

绑定style且后面跟对象

<div :style="{color: currentColor, fontSize: fontSize + 'px'}"></div>

对象的key是css属性名称，value是具体赋的值，值可以来自于data中的属性

绑定style且后面跟数组

<div :style="[baseStyles, ovveridingStyles]"></div>

多个值以，分割即可