當用戶單擊VueJS中的按鈕時，如何動態創建元素並將其附加到dom

Question

我正在嘗試創建一個vue webapp，其中一個形狀（例如正方形）附加到用戶點擊的位置的網頁上。 但我似乎無法獲得創建形狀並附加它的vue。 這是我的代碼，但似乎沒有做任何事情。

<template>
    <div class="shapepage" @click="attachShape"></div>
</template>

<script>
export default {
    name: "ShapePage",
    methods: {
        attachShape: (e) => {
            render:  (createElement) => {
                return createElement('div', {
                    style: {
                        width: "100px",
                        height: "100px",
                        background: "red",
                        color: "white",
                        position: "absolute",
                        left: "50",
                        top: "50"
                    }
                });
            }
        }
    }
}
</script>

<style>
body {
    background-color: rgba(245, 245, 245, 1);
}

.shapepage {
    margin-top: 20px;
    max-width: 500px;
    height: 500px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    box-shadow: 0px 0px 5px 1px grey;
}
</style>

Answer 1

在我看來，渲染就像一個看起來像data（）的函數，所以我認為你不能以這種方式使用，
如果我的觀點是正確的，渲染函數可能與React.js中的渲染相同，它將返回一個VNode樹，並且在默認的vue（使用模板期望渲染）中，它將通過模板生成並在VNode應該刷新時運行
我希望我能幫助你