Javascript v-show在v-for循环中，我只需要打开单击的选项_Javascript_Jquery_Arrays_Vue.js_Frontend

Javascript v-show在v-for循环中，我只需要打开单击的选项

javascript jquery arrays vue.js

Javascript v-show在v-for循环中，我只需要打开单击的选项,javascript,jquery,arrays,vue.js,frontend,Javascript,Jquery,Arrays,Vue.js,Frontend,我刚开始学习Vue.js，我需要一些帮助。我在v-for循环中设置了一个v-show，循环中有一个show按钮，当我点击这个按钮时，它会打开所有隐藏的div，我希望它只打开被点击的相关div。也许有另一种方法可以做到这一点，或者我读到的一种更好的方法，v-show可能不适合在循环中使用 <style> * { box-sizing: border-box; margin: 0; padding: 0; font-family: &q

我刚开始学习Vue.js，我需要一些帮助。我在v-for循环中设置了一个v-show，循环中有一个show按钮，当我点击这个按钮时，它会打开所有隐藏的div，我希望它只打开被点击的相关div。也许有另一种方法可以做到这一点，或者我读到的一种更好的方法，v-show可能不适合在循环中使用

    <style>
      * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
  }
    
  .content {
    width: 100px;
    height: 100px;
    background-color: red;
  }
  
  .contenttwo {
    width: 50px;
    height: 50px;
    background-color: green;
  }
    </style>
</head>

<body>

    <div  id="root">

        <div  v-for="item in dropdownVoices" :key="item.voice"   class="">

          <div v-show="active" class="content">
    
          </div>
    
          <div v-show="!active" class="contenttwo">
    
          </div>
    
          <button type="button" name="button" v-on:click="active = !active">Change me</button>
        </div>

      </div>
    
    <script  charset="utf-8">
        var app = new Vue({
    el: '#root',
    data: {
      active:true,
      dropdownVoices:[
     { voice: 'One' },
     { voice: 'Two' },
     { voice: 'Three' },
     { voice: 'Four' },
     { voice: 'Five' },
     { voice: 'Six' }
   ],
    },
    method:{
   
    }
   });
   Vue.config.devtools = true;

    </script>
</body>
</html>


* {
框大小：边框框；
保证金：0；
填充：0；
字体系列：“蒙特塞拉特”，无衬线；
}
.内容{
宽度：100px；
高度：100px；
背景色：红色；
}
.内容二{
宽度：50px；
高度：50px；
背景颜色：绿色；
}
改变我
var app=新的Vue({
el:'根'，
数据：{
主动：对，
下拉语音：[
{声音：'一'}，
{声音：'两个'}，
{声音：'三'}，
{声音：'四'}，
{声音：'五'}，
{声音：'六'}
],
},
方法：{
}
});
Vue.config.devtools=true；

提前感谢您的帮助。

问题是您只使用一个变量

active

跟踪活动更改，但您需要跟踪每个项目，因此您有两个选项：向每个项目对象添加活动属性或在数组中跟踪活动项目。我先给你看一下

// script
data: {
  dropdownVoices:[
    { voice: 'One' , active: true},
    { voice: 'Two' , active: true},
    { voice: 'Three' , active: true},
    { voice: 'Four' , active: true},
    { voice: 'Five' , active: true},
    { voice: 'Six', active: true }
  ],
}

// template 
<div  v-for="item in dropdownVoices" :key="item.voice" class="">
  <div v-show="item.active" class="content"></div>    
  <div v-show="!item.active" class="contenttwo"></div>
  <button type="button" name="button" v-on:click="item.active = !item.active">Change me</button>
</div>

//脚本
数据：{
下拉语音：[
{语音：'One'，活动：true}，
{语音：'Two'，active:true}，
{语音：'三'，活动：正确}，
{语音：'Four'，active:true}，
{语音：'5'，活动：正确}，
{语音：'Six'，active:true}
],
}
//模板
改变我

注意：如果只想更改div样式，可以使用bind类进行更改

<div :class="item.active ? 'content' : 'contenttwo'"></div>