<template> <title>陈尼克</title> <div> <p>姓名: {{ name }}</p> <p>职业: {{ state.work }}</p> <p>年龄: {{ state.age }}</p> <p>时间: {{ state.time }}</p> <button>修改</button> </div> </template> <script> import { ref, reactive } from 'vue' export default { setup() { const name = ref("Nick") const state = reactive({ work: "前端工程师", age: "18", time: "0" }); setTimeout(() => { }); return { state, name, }; }, }; </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>