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>