每天若有时间,便会抽点出来,学点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中测试: