4. 使用vue.js文件完成编程题： 编写一个计数器(计数器文字、加和减按钮)，数字最大不可以超过5且不能小于0 超过5，弹出提示框`已经超过5了！！` 小于0，弹出提示框`已经小于0了！！

在Vue.js中，我们可以创建一个简单的计数器组件来满足这个需求。首先，需要安装Vue，并在一个HTML文件中引入Vue库。然后，可以使用单文件组件(SFC)的形式编写代码。这是一个基本的计数器组件示例：

<template>
  <div class="counter">
    <h1>{{ count }}</h1>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <span v-if="count > 5" style="color: red;">已经超过5了！！</span>
    <span v-if="count < 0" style="color: red;">已经小于0了！！</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      if (this.count < 5) {
        this.count++;
      } else {
        alert('已经超过5了！');
      }
    },
    decrement() {
      if (this.count >= 0) {
        this.count--;
      } else {
        alert('已经小于0了！');
      }
    },
  },
};
</script>

<style scoped>
.counter {
  width: 200px;
  margin: auto;
}
</style>

在这个例子中，我们创建了一个Vue组件，它有两个数据属性`count`初始化为0，用于存储计数值。还有两个方法`increment`和`decrement`分别对应加和减操作。当尝试增加或减少超出范围时，会显示对应的警告提示。