计算属性关键词: computed
- 计算属性可以通过写一些方法用于处理元数据。例子中messageUpper函数将message的值变为大写。
- 计算属性默认只有 getter ,setter 需要自己提供。例子中输入栏提供修改message的值。
例子:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vue</title>
<script src="vue.js"></script>
</head>
<body>
<div id = "app">
输入:<input v-model="message"><br/>
输入原文:{{message}}<br/>
原文的大写:{{messageUpper}}
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message:'hello vue!'
},
computed: {
messageUpper: function(){
return this.message.toUpperCase();
},
get:function(){
return this.message;
},
set: function(newValue){
this.message = newValue;
}
}
});
</script>
</body>
</html>