如何在 vueJs 中根据输入值隐藏和显示元素

Question

如何在 vue js 中根据兄弟输入值显示和隐藏输入。

Answer 1

您可以在输入中使用 v-show 并在其中传递同级 v-model 值以检查它是否包含值。

在下面的演示中，如果兄弟输入具有 alpha 值，我们将显示输入。您可以根据需要添加条件。

new Vue({
  el: '#app',
  data: {
    input1: null,
    input2: null
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-model="input1" placeholder="Input 1"/>
  <input type="text" v-show="input1 === 'alpha'" v-model="input2"  placeholder="Input 2"/>
</div>

如何在 vueJs 中根据输入值隐藏和显示元素

How to hide and show and element as per input value in vueJs

javascript

dom

vue.js