vue3例子5

?

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 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

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