javascript - 我怎样才能用vuejs切换显示

Question

我希望在单击 .button1 时使用 display:none 切换按钮可见性 我尝试了 if 语句但不起作用 n' 我如何绑定(bind)两个或更多按钮与 vue 的一种样式

<template>
  <div>
    <div id="buttons">
      <div class="button1" @click="showOthers()">1</div>
      <div class="button2" v-bind:style="{ display }">2</div>
      <div class="button3" v-bind:style="{ display }">3</div>
    </div>
  </div>
</template>

  data(){
      return {
        display:'none'
      }
  },
  methods: {
    showOthers: function() {
      this.display = "inline-block"
      if(this.display == "inline-block"){
        this.display = 'none';
      }
    }
  }

*{
  font-family: sans-serif;
}
#buttons div{
  margin-top:5px;
  text-align: center;
  width:40px;
  height:35px;
  background: #333;
  border-radius:15px;
  color:white;
}
#buttons div:first-child{
  display: inline-block;
}

Answer 1

如果我没理解错的话，您只是想在单击按钮 1 时切换其他按钮的显示。我会简单地使用 v-if 并在单击按钮 1

时切换 v-if 中绑定(bind)变量的值

有点像

var app = new Vue({
  el: '#app',
   data :{
        display:false
  },
  methods: {
    showOthers: function() {
      this.display = !this.display;
    }
  }
})

*{
  font-family: sans-serif;
}
#buttons div{
  margin-top:5px;
  text-align: center;
  width:40px;
  height:35px;
  background: #333;
  border-radius:15px;
  color:white;
}
#buttons div:first-child{
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div id="buttons">
      <div class="button1" @click="showOthers()">1</div>
      <div class="button2" v-if="display">2</div>
      <div class="button3" v-if="display">3</div>
    </div>
</div>