鍍金池/ 問答/HTML/ vue這個例子怎么寫呢？

vue這個例子怎么寫呢？

我就是想讓它點擊哪個按鈕時那個按鈕就+1 我都是調(diào)用的同一個方法 這樣可以嗎 不知道后面應該怎樣寫了

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    </style>
    <script src="vue.js"></script>
    <script type="text/javascript">
        window.onload=function(){
           new Vue({
                  el:'#div1',
                  data:{
                        num1:22,
                        num2:64,
                        num3:93,
                  },
                  methods:{
                    count:function(){
                     
                    }
                  }  
           })
        }
    </script>
</head>
<body>
<div id="div1">
    <button v-on:click="count()">{{num1}}</button>
    <button v-on:click="count()">{{num2}}</button>
    <button v-on:click="count()">{{num3}}</button>
</div>
</body>
</html>
回答
編輯回答
刮刮樂

將數(shù)據(jù)定義在一個numbers數(shù)組中，用for循環(huán)渲染button，下面是html部分：

  <div id="div1">
    <button v-for="(item, index) in numbers" @click="count(item.id)" >{{ item.num }}</button>
  </div>

當點擊該button時，傳入當前對象id，通過遍歷找到當前對象，將其對象num加1，下面是js部分：

new Vue({
      el: '#div1',
      data: {
        numbers: [
          {id: 1, num: 0},
          {id: 2, num: 0},
          {id: 3, num: 0}
        ]
      },
      methods: {
        count (id) {
          this.numbers.map(item => {
            if (item.id === id) {
              item.num++
            }
          })
        }
      }
    })
2018年5月8日 21:25
編輯回答
薄荷綠
<!DOCTYPE html>
<html>

    <head>
        <title></title>
        <style type="text/css">

        </style>
        <script src="vue.js"></script>
        <script type="text/javascript">
            window.onload = function() {
                new Vue({
                    el: '#div1',
                    data: {
                        num1: 22,
                        num2: 64,
                        num3: 93,
                    },
                    methods: {
                        count: function() {

                        }
                    }
                })
            }
        </script>
    </head>

    <body>
        <div id="div1">
            <button v-for="(item,index) in $data" v-on:click="$data[index]++">{{$data[index]}}</button>
        </div>
    </body>

</html>
2018年5月27日 05:31