【Vue 从入门到实战 进阶式掌握完整知识体系】04
【Vue 从入门到实战 进阶式掌握完整知识体系】04
5、computed方法生成计算属性简单使用代码语言:javascript代码运行次数:0运行复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta h
【Vue 从入门到实战 进阶式掌握完整知识体系】04
5、computed方法生成计算属性
简单使用
代码语言:javascript代码运行次数:0运行复制<!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>
<!-- 引入Vue库 -->
<script src="@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
ct app = ({
setup(){
ct { ref, computed } = Vue;
ct num = ref(0);
function handleClick(){
num.value ++;
}
// 计算属性
ct computedum = computed(() => {
return num.value + 5;
});
return {
num, handleClick,computedum
}
},
template: `
<div>
<span @click="handleClick">{{num}} -- {{computedum}}</span>
</div>`
});
ct vm = ('#root');
</script>
</html>
运行结果
计算属性内使用get和set方法
代码语言:javascript代码运行次数:0运行复制<!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>
<!-- 引入Vue库 -->
<script src="@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
ct app = ({
setup(){
ct { ref, computed } = Vue;
ct num = ref(0);
function handleClick(){
num.value ++;
}
// 计算属性
let computedum = computed({
get: () => {
return num.value + 5;
},
set: () => {
// 注意这里我们改的是 num
num.value = 100;
}
});
// 定时器:三秒后修改 computedum 的值
setTimeout(() => {
computedum.value = 1;
}, 000);
return {
num, handleClick,computedum
}
},
template: `
<div>
<span @click="handleClick">{{num}} -- {{computedum}}</span>
</div>`
});
ct vm = ('#root');
</script>
</html>
运行结果
使set接收参数
代码语言:javascript代码运行次数:0运行复制<!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>
<!-- 引入Vue库 -->
<script src="@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
ct app = ({
setup(){
ct { ref, computed } = Vue;
ct num = ref(0);
function handleClick(){
num.value ++;
}
// 计算属性
let computedum = computed({
get: () => {
return num.value + 5;
},
set: parameter => {
// 注意这里我们改的是 num
num.value = parameter - 5;
}
});
// 定时器:三秒后修改 computedum 的值
setTimeout(() => {
computedum.value = 1000;
}, 000);
return {
num, handleClick,computedum
}
},
template: `
<div>
<span @click="handleClick">{{num}} -- {{computedum}}</span>
</div>`
});
ct vm = ('#root');
</script>
</html>
运行结果
使用对象
代码语言:javascript代码运行次数:0运行复制<!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>
<!-- 引入Vue库 -->
<script src="@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
ct app = ({
setup(){
ct { reactive, computed } = Vue;
ct numObj = reactive({num: 0});
function handleClick(){
++;
}
// 计算属性
let computedum = computed({
get: () => {
return + 5;
},
set: parameter => {
// 注意这里我们改的是 num
= parameter - 5;
}
});
// 定时器:三秒后修改 computedum 的值
setTimeout(() => {
computedum.value = 1000;
}, 000);
return {
numObj, handleClick,computedum
}
},
template: `
<div>
<span @click="handleClick">{{}} -- {{computedum}}</span>
</div>`
});
ct vm = ('#root');
</script>
</html>
运行结果
#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可,转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间: 2025-07-23 17:26:40
推荐阅读
留言与评论(共有 7 条评论) |
本站网友 性保健常识 | 12分钟前 发表 |
() => { return num.value + 5; } | |
本站网友 配天 | 23分钟前 发表 |
computedum } } | |
本站网友 一小时零食网 | 23分钟前 发表 |
initial-scale=1.0"> <title>了解循环</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ setup(){ ct { ref | |
本站网友 33aacc | 2分钟前 发表 |
原始发表:2021-07-01 | |
本站网友 线上漫画 | 26分钟前 发表 |
handleClick | |
本站网友 后台管理系统模板 | 21分钟前 发表 |
computed } = Vue; ct numObj = reactive({num |