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)">-</button>        <button v-on:click="incrementAge(friend)">+</button>        <input v-model="friend.first">        <input v-model="friend.last">      </h2>    </div>  `})

https://codepen.io/amanda328/pen/wmRqMy?editors=1010


关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章