Vue的計算屬性,方法與偵聽器以及計算屬性的 getter 和 setter
阿新 • • 發佈：2018-11-07
計算屬性：優先推薦，原因：既簡潔又效能高
<body> <div id="app"> {{fullName}} {{age}} </div> <script> var vm = new Vue({ el: '#app', data: { firstName: 'hello', lastName: 'world', age: 28 }, // 計算屬性 computed: { fullName: function() { console.log("計算了一次"); return this.firstName + " " + this.lastName; } } }) </script> <body>
方法
<body> <div id="app"> {{fullName()}} {{age}} </div> <script> var vm = new Vue({ el: '#app', data: { firstName: 'hello', lastName: 'world', age: 28 }, methods: { fullName: function() { console.log("計算了一次"); return this.firstName + " " + this.lastName; } } }) </script> <body>
偵聽器
<body> <div id="app"> {{fullName}} {{age}} </div> <script> var vm = new Vue({ el: '#app', data: { firstName: 'hello', lastName: 'world', fullName: 'hello world', age: 28 }, watch: { firstName: function() { console.log("計算了一次"); this.fullName = this.firstName + " " + this.lastName; }, lastName: function() { console.log("計算了一次"); this.fullName = this.firstName + " " + this.lastName; } } }) </script> <body>
計算屬性的 getter 和 setter
<body>
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'hello',
lastName: 'world',
},
// 計算屬性
computed: {
fullName: {
get: function() {
console.log("計算了一次");
return this.firstName + " " + this.lastName;
}
set: function(value) {
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
})
</script>
<body>