使用 alpine JS 动态添加和删除 DOM 元素

Posted 2023-03-07

【中文标题】使用 alpine JS 动态添加和删除 DOM 元素

【英文标题】：Add and Remove DOM element dynamically using alpine JS

【发布时间】：2021-09-26 19:20:04

【问题描述】：

假设我有 3 个单选按钮，值为 1、2、3。

当我点击值为 2 的单选按钮时，我需要创建 2 个 div。

当我单击值为 1 的单选按钮时，因此我需要删除 1 个 div。

目前，上述场景完成如下：

<template x-for="i in radioValue" x-init="$watch('radioValue', value => console.log(value))">
    <div class="bg-white rounded-md h-full w-full"></div>
</template>

感谢任何帮助！

【参考方案1】：

目前尚不清楚您究竟想要实现什么。但这可以满足您的要求：

<form x-data="radioValue: null">

    <fieldset x-model="radioValue">
        <input type="radio" name="radioInput" value="1">Radio 1<br>
        <input type="radio" name="radioInput" value="2">Radio 2<br>
        <input type="radio" name="radioInput" value="3">Radio 3<br>
    </fieldset>

    <hr>

    <div x-show="radioValue!='1' && radioValue!=null">Div no.1</div>
    <div x-show="radioValue==='2' || radioValue==='1'">Div no.2</div>
    
</form>

您可以使用x-model 获取单选按钮的选定值并将其存储在变量中，然后根据此决定显示/隐藏哪些其他元素。