vue3的ref函数

点击查看代码

<template>
<h1>个人信息</h1>
<h2>姓名：{{ name }}</h2>
<h2>年龄：{{ age }}岁</h2>
<h3>职位：{{ job.type }}</h3>
<h3>薪资：{{ job.salary }}</h3>
<button @click="changeInfo">点我修改信息</button>
</template>

script部分...

点击查看代码

<script>
import { ref } from 'vue';

export default {
  name:'App',
  //测试setup
  setup(){
    //定义数据,这里使用ref响应式定义
    //let两个基本数据类型( name 和 age )
    let name = ref('张三')
    let age = ref(18)

    //let一个对象，对象中有type和salary属性
    let job = ref({
      type:'前端工程师',
      salary:'30k'
    })

    //！！方法改名字，必须要.value
    //这是修改个人信息的方法
    function changeInfo(){      
      name.value = "李四"
      age.value = 48
      job.value.type = '后端工程师'
      job.value.salary = '50k'
    }

    //!!!必须要有返回值!!!
    return {
      name,
      age,
      job,  //如果是对象，返回名字即可
      changeInfo
    }
  }
}
</script>