You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
66 lines
1.3 KiB
66 lines
1.3 KiB
<template>
|
|
<div class="person">
|
|
<h2>汽车信息：一辆{{ car.brand }}车，价值{{ car.price }}万</h2>
|
|
<button @click="changePrice">修改汽车的价格</button>
|
|
<br>
|
|
<h2>游戏列表：</h2>
|
|
<ul>
|
|
<li v-for="g in games" :key="g.id">{{ g.name }}</li>
|
|
</ul>
|
|
<button @click="changeFirstGame">修改第一个游戏的名字</button>
|
|
<br>
|
|
<h2>测试:{{ obj.a.b.c }}</h2>
|
|
<button @click="changeObj">修改第一个游戏的名字</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup name="Person2">
|
|
import {reactive, ref} from 'vue'
|
|
//reative定义对象类型数据
|
|
|
|
//数据
|
|
let car = reactive({brand:'奔驰',price:100})
|
|
let games = reactive([
|
|
{id:'a01',name:"王者荣耀"},
|
|
{id:'a02',name:"王者荣耀1"},
|
|
{id:'a03',name:"王者荣耀2"}
|
|
])
|
|
let obj = reactive({
|
|
a:{
|
|
b:{
|
|
c:666
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
//方法
|
|
function changePrice(){
|
|
car.price +=10
|
|
}
|
|
function changeFirstGame(){
|
|
if (games[0]) {
|
|
games[0].name = '和平精英'
|
|
}
|
|
}
|
|
function changeObj(){
|
|
obj.a.b.c=999
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.person{
|
|
background-color: aquamarine;
|
|
box-shadow: 0 0 10px;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
}
|
|
button{
|
|
margin: 0 5px;
|
|
}
|
|
li{
|
|
font-size: 20px;
|
|
}
|
|
</style>
|