单击按钮添加评论框答案

【问题标题】：Add commenting box on click of button单击按钮添加评论框
【发布时间】：2022-01-18 14:52:09
【问题描述】：

我想在点击按钮时向我的页面添加一些 HTML 代码，这就是我想添加的内容

    <form action="#" id="Reactie_form">
        <input id="Form_voornaam" type="text" placeholder="Voornaam" style="width: 50%"> <br>
        <input id="Form_achternaam" type="text" placeholder="Achternaam" style="width: 50%"><br>
        <input id="Form_email" type="email" placeholder="E-mail" style="width: 50%">
        <textarea id="Form_bericht" style="width: 100%"></textarea>
        <input id="files" type="file" @change="fileSelected" multiple accept=".png, .jpg, .webp, jpeg, .gif">
        <input type="button" class="sendButt" value="Verstuur" @click="submitReactie">
    </form>
    <span v-if="!files || !files.length"></span>
    <ul v-else>
        <li v-for="files in files" :key="files.name">{{ files.name }}</li>
    </ul>

谢谢

【问题讨论】：

请解释问题是什么，并展示您迄今为止为实现既定目标所做的努力
@Ovab 你的意思是。如果有人单击上面的代码将附加的按钮？

标签： javascript html css vue.js

【解决方案1】：

包装您的代码并将包装容器添加一个隐藏类。然后你可以获取点击事件并通过javascript切换css。

【讨论】：

【解决方案2】：

我看到您正在使用 VueJS。这让这样的事情变得简单！

我会怎么做如下：

将以下内容添加到您的 data() ：isClicked: false

将您的代码包装到这样的容器中：

<div v-if='isClicked'>
    <form action="#" id="Reactie_form">
        <input id="Form_voornaam" type="text" placeholder="Voornaam" style="width: 50%"> <br>
        <input id="Form_achternaam" type="text" placeholder="Achternaam" style="width: 50%"><br>
        <input id="Form_email" type="email" placeholder="E-mail" style="width: 50%">
        <textarea id="Form_bericht" style="width: 100%"></textarea>
        <input id="files" type="file" @change="fileSelected" multiple accept=".png, .jpg, .webp, jpeg, .gif">
        <input type="button" class="sendButt" value="Verstuur" @click="submitReactie">
    </form>
    <span v-if="!files || !files.length"></span>
    <ul v-else>
        <li v-for="files in files" :key="files.name">{{ files.name }}</li>
    </ul>
</div>

然后点击您的按钮：<button @click='isClicked = true'>

【讨论】：