Vue.js入门学习 -- 计算属性Computed（ 十一）
程序员文章站
2022-05-08 16:50:55
...
每天若有时间，便会抽点出来，学点Vue的基础（因为不想被社会淘汰绝不是因为闲的慌）还是很嗨皮的，听着歌，对着网上的教程demo，先看一遍，看看自己是否能理解，如果理解不了，在看看demo的演示效果，从演示效果里面找点蛛丝马迹，如果还是理解不了，那就只能在本地亲自敲一遍demo跑一跑了，其实学习很简单，花点时间就OK了，其实健身也很简单，也是花点时间就OK的事，但是，坚持学习和坚持健身很难（这两件事我都在尽量"坚持"，但是有一件事情我是每天都坚持下来的 == 每天至少一包纯奶），废话不多好，直接上demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 计算属性</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<label for="usernmae">用户名</label>
<input type="text" id="username" v-model="message" placeholder="请输入用户名："/>
<br>
<br>
<label for="rusername">用户名翻转</label>
<span>{{reverseMessage}}</span>
<br>
---------------------------
<h1>联系我：{{about}}</h1>
</div>
<script>
var a = new Vue({
el: '#app',
data: {
message: "Appleyk",
name:"CSDN",
url:"https://blog.csdn.net/appleyk"
},
computed:{//computed 性能高于 method（不管值有么有变化，都要调用一次）
//reverseMessage属性的getter == 依赖于缓存，如果message不变，不会重新计算（渲染）
reverseMessage:function(){ //默认getter
return this.message.split("").reverse().join("")
},
about:{
//默认只有getter属性
get:function(){
return this.name+":"+this.url
},
//我们也可以添加setter属性
set:function(newvalue){
var values = newvalue.split(':')
this.name = values[0]
this.url = values[values.length-1]
}
}
}
})
</script>
</body>
</html>
编辑器VSCode：
效果1（测试getter属性）：
效果2（测试setter属性）：
demo说明：
browser中测试：
上一篇： 180331 原型
下一篇： MongoDB查询高级