vue中的计算属性computed
目录一,计算属性的基本使用二,计算属性的get与set三,计算属性与方法的区别Vue计算属性:更强大的属性声明方式,可以对定义的属性进行逻辑处理和数据监视 。逻辑处理就是在计算属性内可以执行一些自己写的逻辑,数据监视就是计算属性内的返回值是依赖其他属性的变化而变化一,计算属性的基本使用<!DOCTYPE html><html><h...
·
目录
Vue计算属性:更强大的属性声明方式,可以对定义的属性进行逻辑处理和数据监视 。逻辑处理就是在计算属性内可以执行一些自己写的逻辑,数据监视就是计算属性内的返回值是依赖其他属性的变化而变化
一,计算属性的基本使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>02_computed</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 />
原样显示:<h1>{{msg}}</h1><br />
大写显示:<h1>{{msg.toUpperCase()}}</h1><br />
计算属性显示:<h1>{{msg1}}</h1><br />
</div>
</body>
</html>
二,计算属性的get与set
计算属性默认有get,但是默认没有set,需要手动写set
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>03_computed_01</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () => {
new Vue({
el : 'div',
data : {
num : 0
},
computed : {
num1 : {
get : function(){
return parseInt(this.num) + 10;
},
set : function(value){
this.num = value;
}
}
}
});
}
</script>
</head>
<body>
<div>
<input type="text" v-model="num" /><br />
原样显示:<h1>{{num}}</h1><br />
<input type="text" v-model="num1" /><br />
计算属性显示:<h1>{{num1}}</h1><br />
</div>
</body>
</html>
三,计算属性与方法的区别
- 计算属性有缓存机制,方法没有;
- 只要计算属性内相关依赖的值不发生改变,多次调用计算属性可以从缓存中获取值,不必重复计算;
- 方法每次调用都要重新执行一遍;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04_computed_02</title>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload = () => {
new Vue({
el : 'div',
data : {
msg : 'sikiedu'
},
computed : {
msg1 : function(){
console.log("### computed");
return this.msg.toUpperCase();
}
},
methods : {
upperCase(){
console.log("$$$ methods");
return this.msg.toUpperCase();
},
show(){
console.log("点击了show按钮")
console.log("计算属性 :" + this.msg1);
console.log("方法调用 :" + this.upperCase());
}
}
});
}
</script>
</head>
<body>
<div>
<input type="text" v-model="msg" /><br />
原样显示:<h1>{{msg}}</h1><br />
计算属性显示:<h1>{{msg1}}</h1><br />
方法显示:<h1>{{upperCase()}}</h1><br />
<button @click="show">show</button>
</div>
</body>
</html>
例:
<template>
<div>
原样显示:<input type="text" v-model="msg" />
<br /><br />
计算属性显示:<h1>{{msg1}}</h1>
方法显示:<h1>{{upperCase()}}</h1>
<button @click="show()">button</button>
</div>
</template>
<script>
export default {
data(){
return{
msg:'hello'
}
},
computed:{
msg1(){
console.log('computed!')
return this.msg.toUpperCase()
},
test:function(){
return 'hello'
},
test1(){
return'hello'
}
},
methods:{
upperCase:function(){
console.log('methods')
return this.msg.toUpperCase()
},
show:function(){
console.log('点击了show按钮')
console.log('计算属性:'+this.msg1)
console.log('方法调用:'+this.upperCase())
}
}
}
</script>
此时改变值:
相同点
1:methods和computed都可以当作方法来使用
2:在定义的时候如下两种写法都可以
不同点
1:调用方式不同。在调用的时候,computed计算属性的方式不能有括号 (),而methods的方式需要加上括号()
2:Computed是依赖其他属性的,也就是说,只有当它依赖的属性发生变化时才会触发这个计算属性,然后以函数的形式返回结果。多次调用计算属性可以从缓存中获取值,不必重复计算。另外,可以像绑定普通属性一样绑定计算属性。
而methods是不依赖其他属性的,每次调用方法都会执行方法内的逻辑。
更多推荐
已为社区贡献65条内容
所有评论(0)