Vue - 计算属性
1.vue计算属性-computed一个数据, 依赖另外一些数据计算而来的结果场景: 一个变量的值, 需要用另外变量计算而得来语法:computed: {"计算属性名" () {return "值"}}注意1: 计算属性和data属性都是变量-不能重名. 用法和data相同注意2: 函数内变量变化, 会自动重新计算结果返回例子:需求:需求1: 求2个数的和显示到页面上需求2: 字符串翻转<t
·
1.vue计算属性-computed
一个数据, 依赖另外一些数据计算而来的结果
场景: 一个变量的值, 需要用另外变量计算而得来
语法:
computed: {
"计算属性名" () {
return "值"
}
}
注意1: 计算属性和data属性都是变量-不能重名. 用法和data相同
注意2: 函数内变量变化, 会自动重新计算结果返回
例子:
-
需求:
- 需求1: 求2个数的和显示到页面上
- 需求2: 字符串翻转
<template>
<div>
<p>和为: {{ num }}</p>
<p>{{ reverseMessage }}</p>
</div>
</template>
<script>
export default {
data() {
return {
a: 10,
b: 20,
message: "我是个字符串",
};
},
computed: {
num() {
return this.a + this.b;
},
reverseMessage() {
return this.message.split("").reverse().join("");
},
},
};
</script>
结果:
2.vue计算属性-缓存
计算属性是基于它们的依赖项的值结果进行缓存的,只要依赖的变量不变, 都直接从缓存取结果
<template>
<div>
<p>{{ reverseMessage }}</p>
<p>{{ reverseMessage }}</p>
<p>{{ reverseMessage }}</p>
<p>{{ getMessage() }}</p>
<p>{{ getMessage() }}</p>
<p>{{ getMessage() }}</p>
</div>
</template>
<script>
export default {
data(){
return {
msg: "Hello, Vue"
}
},
// 计算属性优势:
// 带缓存
// 计算属性对应函数执行后, 会把return值缓存起来
// 依赖项不变, 多次调用都是从缓存取值
// 依赖项值-变化, 函数会"自动"重新执行-并缓存新的值
computed: {
reverseMessage(){
console.log("计算属性执行了");
return this.msg.split("").reverse().join("")
}
},
methods: {
getMessage(){
console.log("函数执行了");
return this.msg.split("").reverse().join("")
}
}
}
</script>
<style>
</style>
总结一下:
计算属性根据依赖变量结果缓存, 依赖变化重新计算结果存入缓存, 比普通方法性能更高
3.vue计算属性-完整写法
计算属性也是变量, 如果想要直接赋值, 需要使用完整写法
语法:
完整语法:
computed: {
// "计算属性名" (){},
"计算属性名": {
set(值){
},
get(){
return 值
}
}
}
需求:
- 计算属性给v-model使用
页面准备输入框
<template>
<div>
<div>
<span>姓名:</span>
<input type="text" v-model="full">
</div>
</div>
</template>
<script>
// 问题: 给计算属性赋值 - 需要setter
// 解决:
/*
完整语法:
computed: {
"计算属性名" (){},
"计算属性名": {
set(值){
},
get(){
return 值
}
}
}
*/
export default {
computed: {
full: {
// 给full赋值触发set方法
set(val){
console.log(val)
},
// 使用full的值触发get方法
get(){
return "无名氏"
}
}
}
}
</script>
<style>
</style>
想要给计算属性赋值, 需要使用set方法
更多推荐
已为社区贡献1条内容
所有评论(0)