vue3完整列表

<template>
<div class="mylist">
<h1>一辆{{ car.brand }}，价值{{ car.price }}</h1>
<button @click="changeprice">修改价格</button>

<br>
<h2>列表</h2>
<ul>
   <li v-for="g in games" :key="g.id">{{ g.name }}</li>
</ul>
</div>
</template>



<script lang="ts" setup name='mylinst234'>
import {reactive} from "vue";
//数据
let car=reactive({brand:'奔驰',price:30})
let games =[
   {id:'adasdas1',name:'英雄'},
   {id:'adasdas2',name:'原始'},
   {id:'adasdas3',name:'原始3'},
]

console.log(car)

//方法
function changeprice(){
   car.price += 10
}
</script>

<style scoped>
/* .mylist{
   width: 600px;
   height: 300px;
   color: #fff;
   font-size: 12px;
   font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  background-color: #409EFF;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
} */
</style>