HTML根据选择控制显示

需要写如下图这样的一个策略页面，要求一开始为空，每次点击做下面的新增按钮即可增加一个策略。然后对于每个增加的策略可以手动选择条件来增加条件。最后不同的策略之间可以上下移动，每个策略可以保存和删除。

在整个策略列表要实现增加每个子策略，整个项目使用Vue架构，所以使用了Vue组件。
这一篇主要来说如何实现子策略如何实现

<template>
  <div>
    <page
      class="page-base"
      float
      title="策略"
      with-padding>
      <div class="strategy-card">
        <div class="term-container">
          <div
            class="term-item-box">
            <!-- 这里只有航班号不属于这一个条件进行说明-->
            <div          
              v-if="conditions.Flight_No_Excludes"
              class="flex-row">
              <div class="title-box">条件</div>
              <div
                disabled
                class="term-box">
                <span>航班号不属于</span>
              </div>
              <input
                v-model="tempConditions.Flight_No_Excludes.value"
                class="value-box"
                type="text">
              <i
                class="fa fa-close"
                style="margin-right: 15px"
                @click="deleteCondition('Flight_No_Excludes')"
              />
            </div>
            <!--其他的需要根据是否选择显示的条件按照上例继续写就好 -->
          </div>
        </div>
        <select
          v-model="selectedOption"
          style="margin: 16px 4px 16px 16px;">>
          <option value="">选择条件</option>
          <option
            v-for="(value,key) in tempConditions"
            :value="key"
            :key="key">{{ value.text }}
          </option>
        </select>
        <button
          style="margin: 16px;"
          class="wider theme-primary"
          @click="addCondition()">添加条件
        </button>
      </div>
    </page>
    <div class="down-arrow"><i class="fa fa-arrow-circle-down"/></div>
  </div>
</template>

以上代码显示出效果如下图。由于一开始没有对下拉框内条件进行选择，所以在上述代码两注释之间的内容的需要显示的条件div标签内的v-if="conditions.Flight_No_Excludes"均判定为false不显示。

接下来是js代码逻辑，先是一个下拉框对条件进行选择。

<select
          v-model="selectedOption"
          style="margin: 16px 4px 16px 16px;">>
          <option value="">选择条件</option>
          <option
            v-for="(value,key) in tempConditions"
            :value="key"
            :key="key">{{ value.text }}
          </option>
        </select>

tempConditions: {
          "Flight_No_Excludes":{
            text:"航班号不属于",
            value:"",
            type:"Array"
          },
          "FLIGHT_NO_INCLUDES": {
            text: "航班号",
            value: "",
            type: "Array"
          },

          "DEPARTURE_AIRPORT_INCLUDES": {
            text: "始发机场属于",
            value: "",
            type: "Array"
          },

          "DEPARTURE_AIRPORT_EXCLUDES": {
            text: "始发机场不属于",
            value: "",
            type: "Array",
          },

          "ARRIVAL_AIRPORT_INCLUDES": {
            text: "到达机场属于",
            value: "",
            type: "Array"
          },
          "ARRIVAL_AIRPORT_EXCLUDES": {
            text: " 到达机场不属于",
            value: "",
            type: "Array"
          },

          "AIRCRAFT_MODEL_INCLUDES": {
            text: "机型属于",
            value: "",
            type: "Array"
          },

          "AIRCRAFT_MODEL_EXCLUDES": {
            text: "机型不属于",
            value: "",
            type: "Array"
          },

          "DEPARTURE_TIME_BEFORE": {
            text: "起飞时间早于",
            value: "",
            type: "Time"
          },

          "DEPARTURE_TIME_AFTER": {
            text: "起飞时间晚于",
            value: "",
            type: "Time"
          },

          "ARRIVAL_TIME_BEFORE": {
            text: "到达时间早于",
            value: "",
            type: "Time"
          },
          "ARRIVAL_TIME_AFTER": {
            text: "到达时间晚于",
            value: "",
            type: "Time"
          },
        }

然后就是添加按钮，根据选择好的进行添加。这里需要注意两点，一个是对于下拉框是否已经选择了一个条件，另外是如果一个条件我们已经添加过，显然不需要进行再次添加，需要进行判断并提醒使用者。

<button
          style="margin: 16px;"
          class="wider theme-primary"
          @click="addCondition()">添加条件
        </button>

let addCondition = function () {
    let context = this
	//判断是否选取添加条件
    if (context.selectedOption == "") {
      Handler.show(null, "未选取添加条件", {
        ok: function () {

        }
      }, true)
      return;
    }
	//判断选取的添加条件是否添加过
    if (context.conditions[context.selectedOption]) {
      Handler.show(null, "条件：" + context.tempConditions[context.selectedOption].text + " 已添加", {
        ok: function () {

        }
      }, true)
      return;
    }

    context.conditions[context.selectedOption] = true
  }

conditions用来储存条件是否被添加。

conditions: {
          "FLIGHT_NO_INCLUDES": false,
          "Flight_No_Excludes": false,

          "DEPARTURE_AIRPORT_EXCLUDES": false,
          "DEPARTURE_AIRPORT_INCLUDES": false,

          "AIRCRAFT_MODEL_INCLUDES": false,
          "AIRCRAFT_MODEL_EXCLUDES": false,

          "ARRIVAL_AIRPORT_INCLUDES": false,
          "ARRIVAL_AIRPORT_EXCLUDES": false,

          "DEPARTURE_TIME_BEFORE": false,
          "DEPARTURE_TIME_AFTER": false,

          "ARRIVAL_TIME_BEFORE": false,
          "ARRIVAL_TIME_AFTER": false,
        },

添加好条件之后需要能够删除添加的条件，如图所示

<i
	class="fa fa-close"
	style="margin-right: 15px"
	@click="deleteCondition('Flight_No_Excludes')"
/>

let deleteCondition = function (condition) {
    let context = this
    context.conditions[condition] = false
}

以上就是如何实现根据所选择来控制显示，总结：一个变量储存所有要显示的选择条件然后根据是否选择来判断是否显示div标签，如果添加/删除条件则改变变量储存的条件状态值（true/false）