vue3 setup reactive响应数据
作者:互联网
reactive不能修饰基本数据类型只能修饰对像和数组
改变对象(可以该变更深层次的对象)
<template>
名字:{{name}}
<br>
年龄:{{age}}
<br>
性别:{{obj.sex}}
<br>
身高:{{obj.long}}
<br>
发行:{{obj.hair.color}}和{{obj.hair.type}}
<br>
<button @click="growup()">
点击成长
</button>
</template>
<script>
import {reactive, ref} from "vue"
export default {
setup(){
let name=ref("张三")
let age=ref(18)
let obj=reactive({
sex:"男",
long:"160",
hair:{
color:"黑",
type:"短"
}
})
function growup(){
age.value=20
obj.long="180"
obj.hair.color="黄"
obj.hair.type="长"
console.log(age);
console.log(obj.long);
}
return{
name,
age,
obj,
growup
}
}
}
</script>
<style>
</style>
改变数组
<template>
名字:{{name}}
<br>
年龄:{{age}}
<br>
性别:{{obj.sex}}
<br>
身高:{{obj.long}}
<br>
发行:{{obj.hair.color}}和{{obj.hair.type}}
<br>
爱好:{{hobbits}}
<br>
<button @click="growup()">
点击成长
</button>
</template>
<script>
import {reactive, ref} from "vue"
export default {
setup(){
let name=ref("张三")
let age=ref(18)
let obj=reactive({
sex:"男",
long:"160",
hair:{
color:"黑",
type:"短"
}
})
let hobbits=reactive(["吃饭","打游戏"])
function growup(){
age.value=20
obj.long="180"
obj.hair.color="黄"
obj.hair.type="长"
hobbits[0]="打代码",
hobbits[1]="运动"
}
return{
name,
age,
obj,
hobbits,
growup
}
}
}
</script>
<style>
</style>
标签:obj,setup,long,hair,reactive,let,vue3,age 来源: https://blog.csdn.net/weixin_50736511/article/details/121752316