Vue.js第三天学习笔记（计算属性computed）
程序员文章站
2023-12-25 21:13:27
今天给大家分享下vue.js中的计算属性(computed)
示例一
computed的get属性
html:
...
今天给大家分享下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前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。