今天给大家分享下vue.js中的计算属性(computed)

示例一

computed的get属性

html:

<template> <div class="input-text"> <input type="text" v-model='firstName'> <input type="text" v-model='lastName'> {{fullName}} </div></template>

js:

<script>export default { components: { }, ready: function() { }, methods: { }, data() { return { firstName: 'Foo', lastName: 'Bar' } }, computed: { fullName: { // getter get: function() { return this.firstName + ' and ' + this.lastName }, // setter set: function(newValue) { var names = newValue.split(' and ') this.firstName = names[0] this.lastName = names[names.length - 1] } } }}</script>

示例二

computed的get和set属性:

html:

<template> <div class="input-text"> <input type="text" v-model='a'>{{b}} <input type="button" value="修改b的值" @click='updateData'> <input type="text" v-model='c'> </div></template>

js:

<script>export default { components: { }, ready: function() { }, methods: { updateData:function(){ this.b=this.b;//给 b 重新赋值时就会调用 b 的 set 属性,从而改变 c 的值 } }, data() { return { a:'1:30', c:'' } }, computed: { b:{ get: function() {//通过a的值改变b的值 var time=this.a; time = time ? time.split(':') : ''; let hours = time[0]; let minutes = time[time.length - 1]; return parseInt(hours) * 60 + parseInt(minutes); }, set:function(newValue){//通过b值的改变,设置 c 的值 let newTimes = newValue; let hoursTime = parseInt(newTimes) / 60; let minutesTime = parseInt(newTimes) % 60; newTimes = newTimes + ''; hoursTime = hoursTime + ''; hoursTime = hoursTime ? hoursTime.split('.') : ''; this.c = hoursTime[0] + ':' + minutesTime; console.log(hoursTime[0] + ':' + minutesTime); } } }}</script>

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。