Vue的Computed的使用
相關Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>名稱案例</title>
<script src="../js/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="firstname">+
<input type="text" v-model="lastname" >=
<input type="text" v-model="fullname">
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
firstname: "",
lastname: ""
},
methods: {
},
watch: {
},
computed:{
// 在 computed 中，可以定義一些 屬性，這些屬性，叫做 【計算屬性】， 計算屬性的，本質，就是 一個方法，只不過，我們在使用 這些計算屬性的時候，是把 它們的 名稱，直接當作 屬性來使用的；並不會把 計算屬性，當作方法去調用；
// 注意1： 計算屬性，在引用的時候，一定不要加 () 去調用，直接把它 當作 普通 屬性去使用就好了；
// 注意2： 只要 計算屬性，這個 function 內部，所用到的 任何 data 中的數據發送了變化，就會 立即重新計算 這個 計算屬性的值
// 注意3： 計算屬性的求值結果，會被緩存起來，方便下次直接使用； 如果 計算屬性方法中，所以來的任何數據，都沒有發生過變化，則，不會重新對 計算屬性求值；
'fullname':function () {
return this.firstname+this.lastname;
}
}
})
</script>
</body>
</html>