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

<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>

<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>

<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>