Question

我已经动态创建了按钮和div，我想在单击相关按钮时显示div并隐藏其余部分。我不知道它们是动态创建的。如何在Vue JS中做到这一点？

<div style="margin-left: -88px;margin-top: 20px;">

<button v-for="namelock in tour_location"  style="background-color:#EFF5FA;border: 0;border-radius: 15px;font-size: 14px;margin-left: 60px;">{{namelock.name}}</button>



<div v-for="(location,index ) in tour_location">

<h1>My Dynamic data</h1></div>

Answer 1

您可以使用v-show，将显示道具@click更改为您要显示的对象的ID，然后在v-show上您可以检查显示道具是否等于您要显示的对象ID想显示

<div id="app">
  <button v-for="b in buttons" @click='show = b' class="btn m-4 btn-primary">{{b}}</button>
  <div class="container">
    <div class="row">
      <div v-show="show === d.id" v-for='d in divs' class="col-sm-3 m-2">
        {{d.name}}
      </div>
    </div>
  </div>
</div>

然后在vue脚本中

var app = new Vue({
  el: '#app',
  data: {
    buttons: [1,2,3],
    divs: [{id:1,name:'apple'},{id:2,name:'mango'},{id:3,name:'banana'}],
    show: null
  },
})

此处的工作代码 Code pen

如何在Vuejs中动态创建的按钮单击上隐藏和显示div

1 个答案: