vue3完整列表

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

<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>