I want to create multiple components in vuejs

Asked 4 months ago, Updated 4 months ago, 11 views

Note: Self-resolved

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

I made a counter after looking at the sample.
How do I install multiple counters in a page so that each value works together?

javascript vue.js

2022-09-30 14:04

1 Answers

I think there are other ways, but
If you only want to display the same value,
Simply place multiple <divid="myCounter"> under the same
I think this is a simple and easy way to realize it.
It's okay to "stretch far".

<divid="myCounter">
    <div>{{count}}</div>
    <button v-on:click="count++">Up</button>
    <div>
    Additional content <br/>
    That <br/>
    <br/>
    <br/> in between
    </div>
    <div>{{count}}</div>
    <button v-on:click="count++">Up</button>
</div>


2022-09-30 14:04

If you have any answers or tips


© 2023 OneMinuteCode. All rights reserved.