当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue.js第三天学习笔记（计算属性computed）

Vue.js第三天学习笔记（计算属性computed）

2018年05月11日  | 移动技术网IT编程  | 我要评论

花色七芒星,吹裙子图片,汤沟镇钱长姐

今天给大家分享下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前端组件学习教程》，欢迎大家学习阅读。

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网