用vue3.x在html文件里输出名字
时间: 2024-09-18 08:18:56 浏览: 36
在Vue 3.x 中,要在 HTML 文件里使用 `script setup` 语法输出名字,你可以创建一个简单的组件,并将名字作为响应式的数据(`ref`)。这里是一个例子:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 3.x 输出名字</title>
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>
</head>
<body>
<div id="app">
<h1>{{ fullName }}</h1>
</div>
<!-- 使用 script setup -->
<script setup>
import { ref } from 'vue';
// 定义名字变量
const name = ref('张三');
// 计算全名(如果需要的话)
const fullName = () => `${name.value}先生`;
// 初始化组件
const app = createApp({});
app.mount('#app');
</script>
</body>
</html>
```
在这个示例中,`name` 是一个 `ref` 对象,它使得 `name.value` 变得响应式。我们在 `<h1>` 标签中使用了双大括号 `{{ fullName }}` 来动态显示名字。
阅读全文