<template>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
<div style="margin-top: 100px;"></div>
</div>
</header>
<div style="width: 100%;height: 100px;"></div>
<Div >{{filterList}}</Div>
<Div >{{doubleCount}}</Div>
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { onMounted, ref, computed } from 'vue'
// 原始数据
const count = ref(0)
// 计算属性
const doubleCount = computed(()=>count.value * 2)
// 原始数据
const list = ref([1,2,3,4,5,6,7,8])
// 计算属性list
const filterList = computed(()=>{
return list.value.filter(item=>item>2)
})
const msg = ref('Hello World!')
const loadinMsg=()=> {
msg.value = 'Loading...1'
}
onMounted(() => {
loadinMsg();
})
</script>
<style scoped>
header {
line-height: 1.5;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
}
</style>
