单页面使用vue3


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<body>
    <div id="app">
        <div v-for="(item,index) in brands" :key="index">
        
            <img :src="item.companyLogo" loading="lazy" style="width:300px;height:200px;"/>
        div>
    div>
body>

html>
<!-- 在 vue.js 之后引入 -->
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    const { onMounted, createApp, reactive, toRefs } = Vue;
    const app = createApp({
        setup() {
            const state = reactive({
                brands: []
            })
            const brands = toRefs([])
            onMounted(() => {
                getBrands();
            })
            const getBrands = () => {
                axios.post('###'
                    , { "current": ###, "size": ###, "activityId": "###", "search": "###" })
                    .then((res) => {
                        state.brands = [...res.data.data];
                    })
            }
            return {
                ...toRefs(state),
                getBrands,

            }
        }
    });
    app.mount("#app");
</script>

你可能感兴趣的:(vue3,javascript,前端)