Vue.js第三天学习笔记(计算属性computed)
2016-12-01 00:00
1226 查看
今天给大家分享下vue.js中的计算属性(computed)
示例一
computed的get属性
html:
js:
示例二
computed的get和set属性:
html:
js:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
Vue.js每天必学之计算属性computed与$watch
vue.js入门教程之计算属性
使用node+vue.js实现SPA应用
使用mongovue把sqlserver数据导入mongodb的步骤
Vuejs第十篇之vuejs父子组件通信
基于Vue.js的表格分页组件
Vue.js每天必学之组件与组件间的通信
VUEJS实战之构建基础并渲染出列表(1)
强大Vue.js组件浅析
示例一
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教程之计算属性Vue.js每天必学之计算属性computed与$watch
vue.js入门教程之计算属性
使用node+vue.js实现SPA应用
使用mongovue把sqlserver数据导入mongodb的步骤
Vuejs第十篇之vuejs父子组件通信
基于Vue.js的表格分页组件
Vue.js每天必学之组件与组件间的通信
VUEJS实战之构建基础并渲染出列表(1)
强大Vue.js组件浅析
相关文章推荐
- Vue.js第三天学习笔记(计算属性computed)
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js学习 Item5 -- 计算属性computed与$watch
- Vue.js学习 Item5 -- 计算属性computed与$watch
- vue.js 计算属性及计算属性(computed)、methods、watched三者区别
- Vue.js学习之计算属性
- Vue.js之计算属性computed与$watch
- Vue.js学习笔记:v-bind属性绑定(class,src)
- Vue.js每天必学之计算属性computed与$watch
- 3.vue入门基础学习笔记-计算属性computed
- 学习vue.js计算属性
- Vue1.0学习总结(3)———vue1.0的生命周期、vue计算属性computed的使用、vue实例(vm)上方法总结、vue结合动画使用
- Vue.js计算属性computed与watch(5)
- vue学习笔记---计算属性和观察者
- Vue.js基本规则提炼总结及计算属性学习
- VUE -- Vue.js每天必学之计算属性computed与$watch
- vue.js学习笔记之属性绑定 v-bind
- vue学习笔记 计算属性(四)
- Vue.js学习系列(二十九)-- 计算属性(三)
- vue的computed计算属性学习