Vue.js笔记-计算属性 class与style绑定

         Vue.js 将绑定表达式限制为一个表达式。 如果需要多于一个表达式的逻辑，应当使用计算属性。

    
    
    
    

     
     
     
     
<div id="example">
     
     
     
     
     a={{ a }}, b={{ b }}
     
     
     
     
</div>
     
     
     
     
var vm = new Vue({
     
     
     
     
      el: '#example',
     
     
     
     
     data: {
     
     
     
     
       a: 1
     
     
     
     
     },
     
     
     
     
     computed: {
     
     
     
     
       // 一个计算属性的 getter
     
     
     
     
       b: function () {
     
     
     
     
         // `this` 指向 vm 实例
     
     
     
     
         return this.a + 1
     
     
     
     
       }
     
     
     
     
     }
     
     
     
     
})
     
     
     
     
console.log(vm.b) // -> 2
     
     
     
     
vm.a = 2
     
     
     
     
console.log(vm.b) // -> 3，vm.b 依赖于 vm.a
    
    
    
    

计算属性vs.$watch

        $watch用于观察vue实例上的数据变动，通常更好的办法是使用计算属性而不是一个命令式的$watch回调。

$watch回调：

    
    
    
    

     
     
     
     
<div id="demo">{{fullName}}</div>
     
     
     
     
var vm = new Vue({
     
     
     
     
  el: '#demo',
     
     
     
     
  data: {
     
     
     
     
    firstName: 'Foo',
     
     
     
     
    lastName: 'Bar',
     
     
     
     
    fullName: 'Foo Bar'
     
     
     
     
  }
     
     
     
     
})
     
     
     
     
 
     
     
     
     
vm.$watch('firstName', function (val) {
     
     
     
     
  this.fullName = val + ' ' + this.lastName
     
     
     
     
})
     
     
     
     
 
     
     
     
     
vm.$watch('lastName', function (val) {
     
     
     
     
  this.fullName = this.firstName + ' ' + val
     
     
     
     
})
    
    
    
    

计算属性：

    
    
    
    

     
     
     
     
var vm = new Vue({
     
     
     
     
  el: '#demo',
     
     
     
     
  data: {
     
     
     
     
    firstName: 'Foo',
     
     
     
     
    lastName: 'Bar'
     
     
     
     
  },
     
     
     
     
  computed: {
     
     
     
     
    fullName: function () {
     
     
     
     
      return this.firstName + ' ' + this.lastName
     
     
     
     
    }
     
     
     
     
  }
     
     
     
     
})
    
    
    
    

计算setter：

    
    
    
    

     
     
     
     
// ...
     
     
     
     
computed: {
     
     
     
     
  fullName: {
     
     
     
     
    // getter
     
     
     
     
    get: function () {
     
     
     
     
      return this.firstName + ' ' + this.lastName
     
     
     
     
    },
     
     
     
     
    // setter
     
     
     
     
    set: function (newValue) {
     
     
     
     
      var names = newValue.split(' ')
     
     
     
     
      this.firstName = names[0]
     
     
     
     
      this.lastName = names[names.length - 1]
     
     
     
     
    }
     
     
     
     
  }
     
     
     
     
}
     
     
     
     
// ...
    
    
    
    

class与style绑定

        操作元素的class列表和它的内联样式，用v-bind处理，只需要计算出表达式最终的字符串，表达式的结果类型 除了字符串之外，还可以是对象或数组。

绑定HTML Class

写法：

1.用mustache标签绑定class，比如class ="{{className}}"

2.v-bind : class  v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:动态变化的值="表达式"

对象语法：

        传给v-bind:class一个对象，动态地切换class，可以与普通的class特性共存。

     
     
     
     

      
      
      
      
<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
      
      
      
      
data: {
      
      
      
      
  isA: true,
      
      
      
      
  isB: false
      
      
      
      
}
     
     
     
     

       渲染为：

     
     
     
     

      
      
      
      
<div class="static class-a"></div>
     
     
     
     

        也可以直接绑定数据里的一个对象

    
    
    
    

     
     
     
     
<div v-bind:class="classObject"></div>
     
     
     
     
data: {
     
     
     
     
  classObject: {
     
     
     
     
    'class-a': true,
     
     
     
     
    'class-b': false
     
     
     
     
  }
     
     
     
     
}
    
    
    
    

数组语法：

        把一个数组传给v-bind:class，以应用一个class列表

    
    
    
    

     
     
     
     
<div v-bind:class="[classA, classB]">
     
     
     
     
data: {
     
     
     
     
  classA: 'class-a',
     
     
     
     
  classB: 'class-b'
     
     
     
     
}
    
    
    
    

       渲染为：

    
    
    
    

     
     
     
     
<div class="class-a class-b"></div>
    
    
    
    

       如果你也想根据条件切换列表中的 class，可以用三元表达式：

    
    
    
    

     
     
     
     
<div v-bind:class="[classA, isB ? classB : '']">//此例始终添加classA，但是只有在isB是true时添加classB
     
     
     
     
<div v-bind:class="[classA, { classB: isB, classC: isC }]">//在数组语法中使用对象语法
    
    
    
    

绑定内联样式

对象语法：

        v-bind:styles的对象语法是一个JavaScript对象，CSS属性名可以用驼峰式或短横分隔命名。

    
    
    
    

     
     
     
     
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
     
     
     
     
data: {
     
     
     
     
  activeColor: 'red',
     
     
     
     
  fontSize: 30
     
     
     
     
}
    
    
    
    

        也可以直接绑定到一个样式对象上：

    
    
    
    

     
     
     
     
<div v-bind:style="styleObject"></div>
     
     
     
     
data: {
     
     
     
     
  styleObject: {
     
     
     
     
    color: 'red',
     
     
     
     
    fontSize: '13px'
     
     
     
     
  }
     
     
     
     
}
    
    
    
    

数组语法：

        将多个样式应用到一个元素上

    
    
    
    

     
     
     
     
<div v-bind:style="[styleObjectA, styleObjectB]">
    
    
    
    

自动添加前缀

       当 v-bind:style 使用需要厂商前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。