<template><div class="persion"><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><h2>性别：{{ sex }}</h2><button @click="nameTel">点击姓名</button><button @click="ageTel">点击年龄</button><button @click="showTel">点击显示电话</button><li v-for="game in games" :key="game.id">{{ game.name }}</li><button @click="games.push({id:'05',name:'和平三国'})">添加游戏</button><button @click="updateGames">修改游戏</button><h2>车名：{{ car.name }}</h2><h2>价格：{{ car.price }}</h2><button @click="carpricte">修改价格</button></div>
</template>
<script lang="ts" setup name="Presion" >
import { ref } from 'vue';//针对一个数据变量
import { reactive } from 'vue';//针对数组，对象let name = ref('张三');let age = ref(18);
let games = reactive([{id:'01',name:'王者农药'}, {id:'02',name:'英雄联盟'},{id:'03',name:'和平精英'},{id:'04',name:'绝地求生'}]);
let car = reactive({name:'奔驰',price:10000000,})
let sex = '男';
let tel = '13812345678';function nameTel() {name.value = '李四';console.log(name);}//修改具体的参数，必须用valuefunction ageTel() {age.value = age.value + 1;}function showTel() {alert(tel);}function updateGames() {games[0].name = '荒野求生';}//当需要同时修改多个对象时，用Object.assign（，，，）function carpricte() {Object.assign(car,{name:"宝马",price:"0"},games,games[0].name='荒野')}</script>
<style>
.persion {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
</style>
