Vue.js
計算されたプロパティ

備考

基本的な例

テンプレート

<div id="example">
  a={{ a }}, b={{ b }}
</div>

JavaScript

var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // a computed getter
    b: function () {
      // `this` points to the vm instance
      return this.a + 1
    }
  }
})

結果

a=1, b=2

ここでは、計算されたプロパティ宣言しているb 。提供された関数は、プロパティvm.bゲッター関数として使用されます。

console.log(vm.b) // -> 2
vm.a = 2
console.log(vm.b) // -> 3

値vm.b常にの値に依存しているvm.a 。

通常のプロパティと同様に、テンプレート内の計算されたプロパティにデータバインドすることができます。 Vueがあることを認識しているvm.b依存するvm.aそれが依存するすべてのバインディング更新しますので、 vm.b vm.a変更を。

計算されたプロパティ対時計

テンプレート

<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
    }
  }
})

計算されたセッター

計算されたプロパティは、計算が変化するデータが変化するたびに自動的に再計算されます。ただし、計算されたプロパティを手動で変更する必要がある場合、Vueではこれを行うためのセッターメソッドを作成できます。

テンプレート （上記の基本的な例から）：

<div id="example">
  a={{ a }}, b={{ b }}
</div>

Javascript：

var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    b: {
      // getter
      get: function () {
        return this.a + 1
      },
      // setter
      set: function (newValue) {
        this.a = newValue - 1 
      }
    }
  }

getterまたはsetterのいずれかを呼び出すことができるようになりました。

console.log(vm.b)       // -> 2
vm.b = 4                // (setter) 
console.log(vm.b)       // -> 4
console.log(vm.a)       // -> 3

vm.b = 4はセッターを呼び出し、this.aを3に設定します。拡張子として、vm.bは4と評価されます。

vモデルの計算されたセッターの使用

計算されたプロパティにv-modelが必要な場合があります。通常、vモデルは計算されたプロパティ値を更新しません。

テンプレート：

<div id="demo">
  <div class='inline-block card'>
    <div :class='{onlineMarker: true, online: status, offline: !status}'></div>  
    <p class='user-state'>User is {{ (status) ? 'online' : 'offline' }}</p>
  </div>

  <div class='margin-5'>
    <input type='checkbox' v-model='status'>Toggle status (This will show you as offline to others)
  </div>
</div>

スタイリング：

#demo {
  font-family: Helvetica;
  font-size: 12px;
}
.inline-block > * {
  display: inline-block;
}
.card {
  background: #ddd;
  padding:2px 10px;
  border-radius: 3px;
}
.onlineMarker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: all 0.5s ease-out;
}

.online {
  background-color: #3C3;
}

.offline {
  background-color: #aaa;
}

.user-state {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.margin-5 {
  margin: 5px;
}

コンポーネント：

var demo = new Vue({
    el: '#demo',
    data: {
        statusProxy: null
    },
    computed: {
        status: {
            get () {
                return (this.statusProxy === null) ? true : this.statusProxy     
            }
        }
    }
})

フィドルは、ここでは、あなたのステータスがオンラインのままで、ラジオボタンがまったく使用していないクリックし、表示されます。

var demo = new Vue({
    el: '#demo',
    data: {
        statusProxy: null
    },
    computed: {
        status: {
            get () {
                return (this.statusProxy === null) ? true : this.statusProxy     
            },
            set (val) {
                this.statusProxy = val            
            }
        }
    }
})

fiddleそして、チェックボックスがチェックされているかチェックされていないので、トグルが起こるのを見ることができます。