vue3例子5

<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>
<button @click="changegames">修改游戏名称</button>
<hr>
<h2>测试：{{obj.a.b.c}}</h2>
<button @click="changeobj">修改obj</button>
</div>
</template>

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

console.log(car)

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

function changegames(){
   games[0].name='流行'
}

function changeobj(){
   obj.a.b.c=999
}
</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>