计算属性的基本使用
初始小示例:
代码:
window.onload = () =>{ new Vue({
el:'div',
data:{
msg:''
} })
} </script>
</head>
<body>
<div>
<input type="text" v-model="msg"/><br />
原样显示:{{msg}}<br />
大写显示:{{msg.toUpperCase()}}<br /> </div>
直接在HTML中使用toUpperCase()方法,这样使得代码太长,影响代码的逻辑;因此就引入了计算属性的应用
Vue计算属性:
更强大的属性声明方式,可以对定义的属性进行逻辑处理与数据监视;
计算属性的使用;
https://cn.vuejs.org/v2/guide/computed.html#计算属性
计算属性的vue代码:
<script>
window.onload = () =>{ new Vue({
el:'div',
data:{
msg:''
},
computed:{
msg1:function(){ return this.msg.toUpperCase();
}
} })
} </script>
html:
<body>
<div>
<input type="text" v-model="msg"/><br />
原样显示:{{msg}}<br />
大写显示:{{msg.toUpperCase()}}<br />
计算属性显示:{{msg1}}<br /> </div>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算属性的基本使用</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () =>{ new Vue({
el:'div',
data:{
msg:''
},
computed:{
msg1:function(){ return this.msg.toUpperCase();
}
} })
} </script>
</head>
<body>
<div>
<input type="text" v-model="msg"/><br />
原样显示:{{msg}}<br />
大写显示:{{msg.toUpperCase()}}<br />
计算属性显示:{{msg1}}<br /> </div>
</body>
</html>
计算属性的基本使用
计算属性的getter和setter
computed:{
num1:function(){ return this.num+;
}
}
因此需要将num1转化为数据类型:
<script>
window.onload = () =>{ new Vue({
el:'div',
data:{
num:
},
computed:{
num1:function(){ return parseInt(this.num) +;
}
} })
} </script>
</head>
<body>
<div>
<input type="text" v-model="num"/><br />
原样显示:{{num}}<br /> 计算属性显示:{{num1}}<br /> </div>
</body>
直接修改num1:
直接修改报错的代码:
<script>
window.onload = () =>{ new Vue({
el:'div',
data:{
num:
},
computed:{
num1:function(){ return parseInt(this.num) +;
}
} })
} </script>
</head>
<body>
<div>
<input type="text" v-model="num"/><br />
原样显示:{{num}}<br />
<input type="text" v-model="num1"/><br />
计算属性显示:{{num1}}<br /> </div>
</body>
因此我们可以认为计算属性时默认是隐式的getter方法
定义get与set方法:
computed:{ num1:{
get:function(){
return parseInt(this.num) +;
},
set:function(value){
return this.num=value; } }
}
注意:在写显式的set方法时需要给它依赖的属性赋值
HTML:
<div>
<input type="text" v-model="num"/><br />
原样显示:{{num}}<br />
<input type="text" v-model="num1"/><br />
计算属性显示:{{num1}}<br /> </div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算属性的getter和setter</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () =>{ new Vue({
el:'div',
data:{
num:
},
computed:{
// num1:function(){
//
// return parseInt(this.num) +10;
// } num1:{
get:function(){
return parseInt(this.num) +;
},
set:function(value){
return this.num=value; } }
} })
} </script>
</head>
<body>
<div>
<input type="text" v-model="num"/><br />
原样显示:{{num}}<br />
<input type="text" v-model="num1"/><br />
计算属性显示:{{num1}}<br /> </div>
</body>
</html>
计算属性的getter和setter
计算属性与方法的区别
计算属性有缓存机制,方法没有;
只要计算属性内相关依赖的值不发生改变,多次调用计算属性可以从缓存中获取值,不必重复计算;
方法每次调用都要重新执行一遍;
依赖值发生改变时都会发生调用;
示例:
属性与方法都可以将小写变为大写
其vue代码为:
<script>
window.onload = () =>{ new Vue({
el:'div',
data:{
msg:''
},
computed:{
msg1:function(){
console.log("$$$$computed"); return this.msg.toUpperCase();
}
},
methods:{ upperCase(){
console.log('####methods');
return this.msg.toUpperCase(); },
show(){
console.log("计算属性"+this.msg);
console.log("方法的调用"+this.upperCase());
} } })
} </script>
html:
<body>
<div>
<input type="text" v-model="msg"/><br />
原样显示:{{msg}}<br /> 计算属性显示:{{msg1}}<br />
方法显示:{{upperCase()}}<br />
<button @click="show">show</button> </div>
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算属性与方法的区别</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () =>{ new Vue({
el:'div',
data:{
msg:''
},
computed:{
msg1:function(){
console.log("$$$$computed"); return this.msg.toUpperCase();
}
},
methods:{ upperCase(){
console.log('####methods');
return this.msg.toUpperCase(); },
show(){
console.log("计算属性"+this.msg);
console.log("方法的调用"+this.upperCase());
} } })
} </script>
</head>
<body>
<div>
<input type="text" v-model="msg"/><br />
原样显示:{{msg}}<br /> 计算属性显示:{{msg1}}<br />
方法显示:{{upperCase()}}<br />
<button @click="show">show</button> </div>
</body>
</html>
计算属性与方法的区别