@Author：Runsen
@Date：2020/10/15
本篇是水篇，记录前端的学习，争取早日拿到前端offer
计算属性，方法和侦听器
所以，对于任何复杂逻辑，你都应当使用计算属性。（官方原话）
<body>
<div id="app">
{
{
FullName}}
<!-- 方法使用的{
{
FullName()}} -->
{
{
age}}
</div>
<script>
var vm = new Vue({
el : "#app",
data:{
FirstName : "Liu",
LastName: "Runsen",
FullName: "Liu Runsen",
age: 21
},
// 计算属性 内置缓存 优先
computed: {
FullName:function(){
console.log("计算了一次");
return this.FirstName + "" + this.LastName
}
}
// 方法
// methods: {
// FullName:function(){
// console.log("计算了一次");
// return this.FirstName + "" + this.LastName
// }
// },
// watch侦听器
// watch: {
// FirstName:function(){
// console.log("计算了一次");
// this.FullName = this.FirstName + "" + this.LastName
// },
// LastName:function(){
// console.log("计算了一次");
// this.FullName = this.FirstName + "" + this.LastName
// }
// },
})
</script>
</body>
计算属性中的Getter和Setter
<body>
<div id="app">
{
{
FullName}}
</div>
<script>
var vm = new Vue({
el: "#app",
data:{
FirstName : "Liu",
LastName: "Runsen",
},
// 计算属性
computed: {
//
// FullName:function(){
// return this.FirstName + "" + this.LastName
// }
FullName:{
get:function(){
return this.FirstName + "" + this.LastName
},
set:function(value){
// console.log(value);
var arr = value.split(" ")
this.FirstName = arr[0]
this.LastName = arr[1]
}
}
},
})
</script>
</body>
参考：慕课网Vue2.5->2.6->3.0 开发去哪儿网App 从零基础入门到实战项目开发
- https://coding.imooc.com/learn/list/203.html
- https://mp.weixin.qq.com/s/ePZnRNPWGWluVBF2z26nAA
转载：https://blog.csdn.net/weixin_44510615/article/details/109106769
查看评论