首页 > web前端 > js教程 > Vue.js计算属性computed

Vue.js计算属性computed

高洛峰
发布: 2016-12-03 09:11:38
原创
1212 人浏览过

computed的get属性

html:

<template>
 <div class="input-text">
 <input type="text" v-model=&#39;firstName&#39;>
 <input type="text" v-model=&#39;lastName&#39;>
 {{fullName}}
 </div>
</template>
登录后复制

js:

<script>
export default {
 components: {
 
 },
 ready: function() {
 
 },
 methods: {
 },
 data() {
 return {
 firstName: &#39;Foo&#39;,
 lastName: &#39;Bar&#39;
 }
 },
 computed: {
 fullName: {
 // getter
 get: function() {
 return this.firstName + &#39; and &#39; + this.lastName
 },
 // setter
 set: function(newValue) {
 var names = newValue.split(&#39; and &#39;)
 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=&#39;a&#39;>{{b}}
 <input type="button" value="修改b的值" @click=&#39;updateData&#39;>
 <input type="text" v-model=&#39;c&#39;>
 </div>
</template>
登录后复制

js:

<script>
export default {
 components: {
 },
 ready: function() {
 },
 methods: {
 updateData:function(){
 this.b=this.b;//给 b 重新赋值时就会调用 b 的 set 属性,从而改变 c 的值
 }
 },
 data() {
 return {
 a:&#39;1:30&#39;,
 c:&#39;&#39;
 }
 },
 computed: {
 b:{
 get: function() {//通过a的值改变b的值
 var time=this.a;
 time = time ? time.split(&#39;:&#39;) : &#39;&#39;;
 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 + &#39;&#39;;
 hoursTime = hoursTime + &#39;&#39;;
 hoursTime = hoursTime ? hoursTime.split(&#39;.&#39;) : &#39;&#39;;
 this.c = hoursTime[0] + &#39;:&#39; + minutesTime;
 console.log(hoursTime[0] + &#39;:&#39; + minutesTime);
 }
 }
 }
}
</script>
登录后复制


相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板