53 lines
1.5 KiB
Vue
53 lines
1.5 KiB
Vue
<style lang="scss" scoped>
|
|
div.root-home {
|
|
.div-grid {
|
|
width: 500px;
|
|
height: 500px;
|
|
display: grid;
|
|
border: #a855f7 1px dashed;
|
|
grid-template-columns: repeat(3, 100px);
|
|
grid-template-rows: repeat(3, 100px);
|
|
justify-content: flex-end;
|
|
justify-items: flex-start;
|
|
align-content: space-between;
|
|
align-items: center;
|
|
|
|
.grid-item {
|
|
border: #a855f7 1px dashed;
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<div class="root-home">
|
|
<div class="div-grid">
|
|
<div class="grid-item">a</div>
|
|
<div class="grid-item">b</div>
|
|
<div class="grid-item">c</div>
|
|
<div class="grid-item">a</div>
|
|
<div class="grid-item">b</div>
|
|
<div class="grid-item">c</div>
|
|
<div class="grid-item">a</div>
|
|
<div class="grid-item">b</div>
|
|
<div class="grid-item">c</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {ref} from "vue";
|
|
|
|
defineOptions({name: "home"});
|
|
const demoFunc = async (): Promise<void> => {
|
|
nestedObject.value = nestedObject.value + "000";
|
|
};
|
|
let nestedObject = ref("222222222");
|
|
watchDeep(nestedObject, (updated) => {
|
|
// 这个对象,不管多少层,只要有一个值发生了变化就返回变化的完整的对象
|
|
console.log(updated);
|
|
},);
|
|
|
|
</script>
|