soilgd/前端/vue3/测试/src/components/TheWelcome.vue

<script setup lang="ts">
import { ref } from 'vue';

// 定义响应式变量
const name = ref('请问');
const age = ref(18);
const tel = ref('12312312312');

// 定义方法
function changeName() {
  name.value = 'qw';
}

function changeAge() {
  age.value += 3;
}

function showTel() {
  alert(tel.value);
}
</script>

<template>
  <!-- 主要容器，应用了`.TheWelcome`类以应用样式 -->
  <div class="TheWelcome">
    <!-- 动态显示用户的名字 -->
    <h2>姓名：{{ name }}</h2>

    <!-- 动态显示用户的年龄 -->
    <h2>年龄：{{ age }}</h2>

    <!-- 按钮，点击时调用`changeName`方法修改名字 -->
    <button @click="changeName">点击修改名字</button>

    <!-- 按钮，点击时调用`changeAge`方法增加年龄 -->
    <button @click="changeAge">点击修改年龄</button>

    <!-- 按钮，点击时调用`showTel`方法显示电话号码 -->
    <button @click="showTel">点击查看号码</button>
  </div>
</template>

<style scoped>
/*
  .TheWelcome 类选择器，仅应用于当前组件内部的元素，
  因为使用了`scoped`属性，确保样式不会影响到其他组件
*/
.TheWelcome {
  background-color: skyblue; /* 设置背景颜色 */
  box-shadow: 0 0 10px;       /* 添加阴影效果 */
  border-radius: 10px;        /* 设置圆角半径 */
  padding: 20px;              /* 设置内边距 */
}

/* 设置按钮之间的间距 */
button {
  margin: 0 5px;
}
</style>