5、computed方法生成计算属性
简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>了解循环</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
setup(){
const { ref, computed } = Vue;
const num = ref(0);
function handleClick(){
num.value ++;
}
const computedNum = computed(() => {
return num.value + 5;
});
return {
num, handleClick,computedNum
}
},
template: `
<div>
<span @click="handleClick">{{num}} -- {{computedNum}}</span>
</div>`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
![image-20210615231658704](https://i-blog.csdnimg.cn/blog_migrate/2642a754a7d6c4465f3413ef9062e84d.png)
计算属性内使用get和set方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>了解循环</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
setup(){
const { ref, computed } = Vue;
const num = ref(0);
function handleClick(){
num.value ++;
}
let computedNum = computed({
get: () => {
return num.value + 5;
},
set: () => {
num.value = 100;
}
});
setTimeout(() => {
computedNum.value = 1;
}, 3000);
return {
num, handleClick,computedNum
}
},
template: `
<div>
<span @click="handleClick">{{num}} -- {{computedNum}}</span>
</div>`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
![image-20210615232328240](https://i-blog.csdnimg.cn/blog_migrate/41ee97d97b3a84f8aad7cb9388480776.png)
使set接收参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>了解循环</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
setup(){
const { ref, computed } = Vue;
const num = ref(0);
function handleClick(){
num.value ++;
}
let computedNum = computed({
get: () => {
return num.value + 5;
},
set: parameter => {
num.value = parameter - 5;
}
});
setTimeout(() => {
computedNum.value = 1000;
}, 3000);
return {
num, handleClick,computedNum
}
},
template: `
<div>
<span @click="handleClick">{{num}} -- {{computedNum}}</span>
</div>`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
![image-20210615232654292](https://i-blog.csdnimg.cn/blog_migrate/30ae19442aa6e169a269f70b4ba67b95.png)
使用对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>了解循环</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
setup(){
const { reactive, computed } = Vue;
const numObj = reactive({num: 0});
function handleClick(){
numObj.num ++;
}
let computedNum = computed({
get: () => {
return numObj.num + 5;
},
set: parameter => {
numObj.num = parameter - 5;
}
});
setTimeout(() => {
computedNum.value = 1000;
}, 3000);
return {
numObj, handleClick,computedNum
}
},
template: `
<div>
<span @click="handleClick">{{numObj.num}} -- {{computedNum}}</span>
</div>`
});
const vm = app.mount('#root');
</script>
</html>
运行结果
![image-20210615233231579](https://i-blog.csdnimg.cn/blog_migrate/c4b41df6ce9dbcdfc606625f038e7886.png)