

追記: 自己解決しました

* * *
[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <title>My Vue.js Practice</title>
    </head>
    <body>
      <div id="myCounter">
        <div>{{ count }}</div>
        <button v-on:click="count ++">Up</button>
      </div>
      <script src="./js/vue.js"></script>
      <script>
        var vm = new Vue({
          el: '#myCounter',
          data: {
            count: 0
          },
          methods: {
            countUp: function(){
              this.count++;
            }
          }
        });
      </script>
    </body>
    </html>
    
[/code]

サンプルをみてカウンターを作りました。  
ページ内に複数のカウンターを設置して、それぞれの値が連動するようにするにはどうしたらよいのでしょうか。


CC BY-SA 3.0
2017-06-09T02:20:18.977
35418
2017-06-09T04:29:52.037
2017-06-09T04:29:52.037
9149
9149
question
javascript vue.js
vuejsで複数のコンポーネントを作りたい


他にも方法はあると思いますが、  
**同じ値を表示する** だけなら、  
単に同じ`<div id="myCounter">`配下に複数配置するだけでよいです。  
これが単純で簡単な実現方法だと思います。  
「遠くにまたがって」いても大丈夫です。

[code]

    <div id="myCounter">
        <div>{{ count }}</div>
        <button v-on:click="count ++">Up</button>
        <div>
        別の内容<br />
        あれや<br />
        これや<br />
        間に色々ある<br />
        </div>
        <div>{{ count }}</div>
        <button v-on:click="count ++">Up</button>
    </div>
    
[/code]


CC BY-SA 3.0
2017-06-09T04:05:00.723
35420
2017-06-09T04:05:00.723
5044
35418
answer