当用户单击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应该刷新时运行
我希望我能帮助你