2023-03-29 09:18:25 +08:00
|
|
|
<template>
|
2023-03-29 10:43:46 +08:00
|
|
|
<a-card>
|
|
|
|
<div>
|
|
|
|
<h1>首页</h1>
|
|
|
|
</div>
|
2023-03-29 22:52:49 +08:00
|
|
|
<div>{{ list }} - {{ stateCount }}</div>
|
2023-03-29 10:43:46 +08:00
|
|
|
<div>
|
|
|
|
{{ state }}
|
|
|
|
<a-button type="primary" @click="() => state.count++">点击+1</a-button>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
{{ i }}
|
|
|
|
<a-button type="primary" @click="changeClick">点击+1</a-button>
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<RouterLink to="/site/index2">跳转到子页</RouterLink>
|
|
|
|
</div>
|
2023-03-30 18:48:15 +08:00
|
|
|
<br/>
|
2023-03-29 22:52:49 +08:00
|
|
|
<div>
|
2023-03-30 18:48:15 +08:00
|
|
|
<RouterLink to="/dashboard/analysis">跳转到首页</RouterLink>
|
2023-03-29 22:52:49 +08:00
|
|
|
</div>
|
2023-03-29 10:43:46 +08:00
|
|
|
</a-card>
|
2023-03-29 09:18:25 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
2023-03-29 22:52:49 +08:00
|
|
|
import { ref, reactive, computed, onMounted } from 'vue';
|
2023-03-29 10:43:46 +08:00
|
|
|
// reactive
|
2023-03-29 22:52:49 +08:00
|
|
|
let list = reactive({ list: [] });
|
|
|
|
//针对基础类型
|
2023-03-29 09:18:25 +08:00
|
|
|
const state = ref({ count: 0 });
|
2023-03-29 10:43:46 +08:00
|
|
|
let i = ref(1);
|
|
|
|
|
2023-03-29 22:52:49 +08:00
|
|
|
//计算属性
|
|
|
|
const stateCount = computed(() => {
|
|
|
|
return state.value.count;
|
|
|
|
});
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
console.log('页面加载完了!');
|
|
|
|
});
|
|
|
|
|
|
|
|
//方法
|
2023-03-29 10:43:46 +08:00
|
|
|
function changeClick() {
|
|
|
|
i.value++;
|
2023-03-29 22:52:49 +08:00
|
|
|
// list.list.push({ key: i.value });
|
2023-03-29 10:43:46 +08:00
|
|
|
}
|
2023-03-29 09:18:25 +08:00
|
|
|
</script>
|