ref函数处理基本类型
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app')
<template>
<h1>个人信息</h1>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<button @click="changeInfo">修改个人信息</button>
</template>
<script>
import {ref} from "vue";
export default {
name: 'App',
setup(){
let name = ref("张三");
let age = ref(18);
function changeInfo(){
name.value = "李四";
age.value = 28;
}
return {
name,
age,
changeInfo
}
}
}
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/4a14d931f0434006b2c17dd1564b96ca.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcmljaGVzdF9xaQ==,size_20,color_FFFFFF,t_70,g_se,x_16)
- 启动应用,测试效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/f7cc288af6f743fa93141c647845b480.gif#pic_center)
ref函数处理对象类型
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app')
<template>
<h1>个人信息</h1>
<h2>姓名:{{name}}</h2>
<h2>年龄:{{age}}</h2>
<h2>岗位:{{job.position}}</h2>
<h2>薪酬:{{job.salary}}</h2>
<button @click="changeInfo">修改个人信息</button>
</template>
<script>
import {ref} from "vue";
export default {
name: 'App',
setup(){
let name = ref("张三");
let age = ref(18);
let job = ref({
position:"前端工程师",
salary:"30k"
});
function changeInfo(){
name.value = "李四";
age.value = 28;
job.value.position = "Java工程师";
job.value.salary = "60k";
}
return {
name,
age,
job,
changeInfo
}
}
}
</script>
![在这里插入图片描述](https://img-blog.csdnimg.cn/fc59fb3aeb99467bb155e5e11fb8b6ce.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcmljaGVzdF9xaQ==,size_20,color_FFFFFF,t_70,g_se,x_16)
- 启动应用,测试效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/01c06804a01940b093cbe0a8f30caca3.gif#pic_center)