65 lines
1.7 KiB
Vue
65 lines
1.7 KiB
Vue
<template>
|
|
<div class="person">
|
|
|
|
<h3>一辆{{brand}}汽车的价格是:{{ jg }}万元!</h3>
|
|
<button @click="changePrice">加价10万元</button>
|
|
<h3>我的游戏:</h3>
|
|
<ul>
|
|
<li v-for="game in games" :key="game.id">{{game.name}}</li>
|
|
</ul>
|
|
<button @click="changeGame">添加新游戏</button>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
import { reactive, ref, toRefs, toRef } from 'vue';
|
|
let car = reactive({
|
|
brand: '奔驰',
|
|
price: 100,
|
|
color: '黑色',
|
|
})
|
|
let { brand, price, color } = toRefs(car);
|
|
let jg = toRef(car, 'price');
|
|
console.log(brand, price, color);
|
|
|
|
let games = ref([
|
|
{ name: '游戏1', id: 10 },
|
|
{ name: '游戏2', id: 20 },
|
|
{ name: '游戏3', id: 30 }
|
|
]);
|
|
function changePrice() {
|
|
price.value += 10;
|
|
console.log(price.value);
|
|
}
|
|
function changeGame() {
|
|
games.value = [{ name: '游戏1', id: 10 },
|
|
{ name: '游戏2asdasd', id: 20 },
|
|
{ name: '游戏3', id: 30 }];
|
|
// Object.assign(games, [{ name: '游戏1saddsa222', id: 10 },
|
|
// { name: '游戏2asdas', id: 20 },
|
|
// { name: '游戏3', id: 30 }]);
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.person{
|
|
background-color: #a7b8bb;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
}
|
|
button{
|
|
background-color: #313633;
|
|
color: #15d11f;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
</style> |