vue filter(七)

 使用filter過濾器
const app = new Vue({
el: “#app”,
data: {
friends: [
{
first: “Bobby”,
last: “Boone”,
age: 25
},
{
first: “John”,
last: “Boone”,
age: 35
}
],
},
filters: {
ageInOneYear(age) {
return age + 1;
},
fullName(value) {
return `${value.last}, ${value.first}`;
}
},
methods:{
decrementAge(friend){
friend.age = friend.age – 1;
},
incrementAge(friend){
friend.age = friend.age + 1;
}
},
template: `
<div>
<h2 v-for=”friend in friends”>
<h4>{{friend | fullName}}</h4>
<h5>age: {{friend.age}}</h5>
<button v-on:click=”decrementAge(friend)”>-<tton>
<button v-on:click=”incrementAge(friend)”>+<tton>
<input v-model=”friend.first”>
<input v-model=”friend.last”>
</h2>
</div>
`
})