javascript - Vue 2.0如何控制单个公用组件的状态

Question

需求： 在点击开关按钮的时候来显示或隐藏相对应下面的工具栏。 列表是通过数据渲染出来的。

代码

<li class="server-list">
  <h2 class="server-title ">
    <p class="name">小保养</p>
    <p class="proposal">建议5000公里/12个月保养一次</p>
    <span class="edit"></span>
    <span class="over-btn">完成</span>
  </h2>
  <ul class="product-list">
    <li class="product-item">
      <p class="product-box clearfix">
        <p class="img-box ">
          <img src="http://i1.piimg.com/4851/77e3331459df7728.png" alt="...">
        </p>
        <p class="product-info ">
          <p class="product-name">嘉实多极护5W-40 A3/B4钛流体全合 成机油润滑油SN/CF 4L</p>
          <p class="product-pirce">￥480</p>
          <p class="count-box">
            <span class="product-count">x1</span>
            <p class="count-tool clearfix">
              <p class="reduce fl">-</p>
              <p class="number fl">1</p>
              <p class="add fl">+</p>
            </p>
            <p class="product-change">更换</p>
            <p class="product-delete">删除</p>
          </p>
          <p class="sub-title">+增加1L机油(可根据需求增加)</p>
        </p>
      </p>
    </li>
    <li class="product-item"></li>
  </ul>
</li>