conditionals-9.vue

<template>
  <div>
    {{ count }}
    <button @click="count++">increment</button>
    <button @click="reset">reset</button>
    <br>
    <br>

    <strong v-if="count === 0">Please increment</strong>
    <em v-else-if="count === 1">That's {{ count }}. Go on</em>
    <div v-else-if="count === 2">
      Okay, that's {{ count }}, go
      <b>ON</b>
    </div>
    <div v-else-if="count < 10">Almost there{{ dots }}</div>
    <div v-else>Good Job!</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      
    };
  },
  computed: {
    dots: function () { 
      return Array.from(Array(this.count)).join(".");
    }
  },
  methods: {
    reset: function() {
      alert("resetting!")
      this.count = 0
    }
  }
};
  
</script>