Vue3【七】setup的语法糖setup简写方法

Vue3【七】setup的语法糖setup简写方法
使用script标签式写法称为setup语法糖
组件名称默认位文件名
export 的内容可以省略

案例截图

案例目录

案例代码

Person.vue

<template><div class="person"><h1>我是Person组件</h1><h2>姓名:{{ name }}</h2><h2>年龄:{{ age }} </h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="showAdd">查看信息</button></div>
</template><script lang="ts" setup>
let name = "太上老君"
let age = 18000
let add = '太上老君是公认的道教始祖，即道教中具有开天创世与救赎教化的太上道祖。'
function showAdd() {alert(add)
}
function changeName() {name = name == "太白金星" ? '太上老君' : '太白金星'console.log(name)
}
function changeAge() {age += 1console.log(age)
}
</script><style scoped>
.person {background-color: #ff9e4f;box-shadow: 0 0 10px;border-radius: 30px;padding: 30px;
}button {margin: 0 10px;padding: 0 5px;box-shadow: 0 0 5px;;
}
</style>