Question

我有一个带有复选框的表单，选中后，会在页面上显示一个div，其中包含一些用户的辅助操作信息。每个复选框都有自己的特殊div，包含更多信息。

但是，我有两个包含相同说明的复选框，问题是当两者都被选中时，会出现2个指令实例。

我如何编写条件逻辑，因此如果用户选择了这两个复选框，则只显示一组指令？

以下是该问题的实时演示：DEMO

情景：

选择 DEF - ＆gt;自定义静态图形支持和自定义动画支持，您将注意到两个副本＆＃34;在这里填写自定义图形支持＆＃34;元素显示在页面底部。

剪切HTML：

        <label for="custom_static_graphic">
          <input type="checkbox" id="custom_static_graphic" value="Custom Static Graphic" v-model="selectedProducts">Custom Static Graphic Support
        </label>

        <label for="custom_animation">
          <input type="checkbox" id="custom_animation" value="Custom Animation Support" v-model="selectedProducts">Custom Animation Support
        </label>

我这样写的尝试不起作用：

 <div class="alert alert-success" v-if="(!selectedOffice.inJira) && ( (product ==='Custom Animation Support') || (product === 'Custom Static Graphic') )">Fill out the custom graphic support here</div>

Answer 1

我最终把div放在了循环之外。

VueJS：输入复选框和切换div元素

1 个答案: