<!-- eslint-disable vue/multi-word-component-names -->

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

// 使用`ref`创建响应式对象
const car = ref({
  brand: "奔驰", 
  price: 100
});

// 游戏列表
const gamesList = ref([
  {id: 'ays1', name: '王者2'},
  {id: 'ays2', name: '王者3'},
  {id: 'ays3', name: '王者4'},
]);

function changePrice() {
  car.value.price += 10;
}
function changeFirstGame() {
  gamesList.value[0].name = '枪战';
}
</script>

<template>
  <!-- 主要容器，应用了`.HelloWorld`类以应用样式 -->
  <div class="HelloWorld">
    <h2>汽车信息：一辆{{ car.brand }}车, 价值{{ car.price }}万</h2>
    <button @click="changePrice">增加价格</button>
    <br>
    <h2>游戏列表：</h2>
    <ul>
      <li v-for="game in gamesList" :key="game.id">
        {{ game.name }}
      </li>
    </ul>
    <button @click="changeFirstGame">修改游戏</button>
  </div>
</template>

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

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