Vue3--篇6--ref函数--处理基本数据类型

<template>
  <h1>姓名：{{ name }}</h1>
  <h1>岁数：{{ age }}</h1>
  <h1><button @click="editInfo">修改信息</button></h1>
</template>

<script>
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    let name = ref("张三");
    let age = ref("14");
    console.log(name); //通过ref函数处理，返回的是一个引用对象
    function editInfo() {
      //修改用如下方式，才能实现响应式
      name.value = "李四";
      age.value = "18";
    }
    return {
      name,
      age,
      editInfo,
    };
  },
};
</script>

<style lang="scss"></style>

image.png image.png