提出问题
实现下面功能,在一个输入框,输入出生年月日,就能计算出年龄,如下:
代码如下:
<div id="app">
输入出生年份:<input type="text" v-model="birthday"><br>
年龄:<span>{{new Date().getFullYear()-birthday.slice(0,4)}}</span><!-- 可行,但是不推荐,代码过于复杂 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
birthday:''
}
})
</script>
模板内的表达式非常便利,但是设计的初衷是用于 简单运算 ,不推荐复杂代码
官方有代码风格指南,见 链接
解决
当模板中的表达式复杂时,就推荐使用 计算属性
代码如下:
<div id="app">
输入出生年份:<input type="text" v-model="birthday"><br>
年龄:<span>{{showAge}}</span>(表达式只写计算属性名,会自动调用 getter函数)<br>
年龄:<span>{{showAge}}</span><br>
年龄:<span>{{showAge}}</span><br>
年龄:<span>{{showAge}}</span>(计算属性会缓存结果,如:显示4次年龄,初始化时只执行1次showAge()方法)
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
birthday:''
},
computed:{//计算属性
showAge:{//声明计算属性 showAge,并提供getter函数
get:function(){
console.log("showAge")
return new Date().getFullYear() - this.birthday.slice(0,4)
}
}
}
})
</script>
特点
- 当属性值
birthday
改变时,才会触发执行get()
函数 - 计算属性会缓存结果,如:显示4个年龄,初始化时只执行1次
get()
函数。可以提高性能 - 计算属性默认只有 getter,需要时你也可以提供一个 setter,见 官网
计算属性的简写
当计算属性只是用于 读取、显示,不需要 修改,可以使用下面简写形式:
<div id="app">
输入出生年份:<input type="text" v-model="birthday"><br>
年龄:<span>{{showAge}}</span>(表达式只写计算属性名,会自动调用 getter函数)<br>
年龄:<span>{{showAge}}</span><br>
年龄:<span>{{showAge}}</span><br>
年龄:<span>{{showAge}}</span>(计算属性会缓存结果,如:显示4次年龄,初始化时只执行1次showAge()方法)
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<script>
var vm = new Vue({
el: '#app',
data:{
birthday:''
},
computed:{
showAge:function(){ //简化写法:定义showAge属性,并提供getter函数
console.log("showAge")
return new Date().getFullYear() - this.birthday.slice(0,4)
}
}
})
</script>