008、Vue3+TypeScript基础,数组和对象的响应式修改方法
01、App.vue代码如下:
<template> <div class="app"> <h1>好好学习,天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/Person.vue' export default { // App为根组件 name: 'App', // 注册Person组件,注册后,在本单元中可以直接使用Person组件 components: {Person} } </script> <!--样式 scoped表示仅本单元有效--> <style scoped> .app { background-color: #ddd; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; } </style>
02.Person.vue代码如下:
<template> <div class="person"> <h2>一辆{{ car.brand }}车,价值{{ car.price }}</h2> <button @click="changePrice">修改汽车价格</button> <br> <h1>游戏列表</h1> <ul> <li v-for="(game, index) in games" :key="game.id">{{ index + 1 }}.{{ game.name }}</li> </ul> <button @click="changeGameName">修改游戏名字</button> </div> <h3>对象测试:{{ obj.a.b.c }}</h3> <button @click="changeObjName">修改对象内容</button> </template> <script lang="ts" name="Person001" setup> import {reactive} from 'vue' // 数据变成响应式 let car = reactive({ brand: '宝马', price: 1000 }) let games = reactive([ {id: 'game001', name: '王者荣耀'}, {id: 'game002', name: '原神'}, {id: 'game003', name: '吃鸡'}, ]) let obj = reactive({ a: { b: { c: 10 } } }) // 方法 function changePrice() { car.price += 10 } function changeGameName() { games[0].name = '幻塔' } function changeObjName() { obj.a.b.c += 10 } </script> <!--样式 scoped表示仅本单元有效--> <style scoped> .person { background-color: #ddd; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; button { margin: 0 5px; } } </style>
03、效果如下: