根据vuejs中的选定值隐藏显示div答案

【问题标题】：Hide show div based on selected value in vuejs根据vuejs中的选定值隐藏显示div
【发布时间】：2021-03-16 13:25:19
【问题描述】：

我有一个 vuejs 下拉菜单，现在我想根据下拉选择的值隐藏和显示我的潜水。 Hers 是我的代码，但它只适用于一个 id，而不适用于所有人。我想根据选项模态值从这里隐藏显示我的 div 即 - 如果我的模态值为 1 那么它应该只显示 test_1 divs

<template>
  <div>
    <multiselect
      v-model="optionsData[0]"
      :options="optionsData"
      :custom-label="nameWithLang"
      placeholder="Pick some"
      label="data"
      track-by="data" 
      @change="hideshowdiv"/>
  </div>
  <div id="test_1">test 1</div>
  <div id="test_1">test 1</div>
  <div id="test_1">test 1</div>
  <div id="test_1">test 1</div>
  <div id="test_1">test 1</div>
  <div id="test_2">test 2</div>
  <div id="test_2">test 2</div>
  <div id="test_2">test 2</div>
  <div id="test_2">test 2</div>
  <div id="test_2">test 2</div>
</template>

export default {
  components: {
    Multiselect,
    InputTag
  },
  data: () => ({
    optionsData: [
      { id: '1', data: 'Value1' },
      { id: '2', data: 'Value2' }
    ],
  }),
  method() {
    hideshowdiv(value) {
      document.getElementById("test_" + value).style.display = "block";
    }
  }
}

【问题讨论】：

1. document.getElementById 将仅返回 1 个元素。您可以使用 css 类和 document.querySelectorAll 组合来实现您想要的。但是 2. 更重要的是，这是显示和隐藏 div 的老派方式。在vue 中，您可以使用v-if 来显示和隐藏元素。

标签： javascript vue.js

【解决方案1】：

尝试使用 v-if

使用 v-if

更新您的 HTML，如下所示

<div id="test_1" v-if="selectedValue == 1">test 1</div>
  <div id="test_1" v-if="selectedValue == 1">test 1</div>
  <div id="test_1" v-if="selectedValue == 1">test 1</div>
  <div id="test_1" v-if="selectedValue == 1">test 1</div>
  <div id="test_1" v-if="selectedValue == 1">test 1</div>
  <div id="test_2" v-if="selectedValue == 2">test 2</div>
  <div id="test_2" v-if="selectedValue == 2">test 2</div>
  <div id="test_2" v-if="selectedValue == 2">test 2</div>
  <div id="test_2" v-if="selectedValue == 2">test 2</div>
  <div id="test_2" v-if="selectedValue == 2">test 2</div>

然后声明selectedValue变量，你也可以给它赋默认值

data: () => ({
    optionsData: [
      { id: '1', data: 'Value1' },
      { id: '2', data: 'Value2' }
    ],
    selectedValue: Number
  })

并在方法中为 selectedValue 赋值

method() {
hideshowdiv(value) {
  this.selectedValue = value;
}}

【讨论】：

【解决方案2】：

您应该先将所有 div 设为“display:none”，然后再将 div 设为“display:block”。它不会自动更改“display:none”。

【讨论】：