vue实现消息提示红点

要实现消息提示红点，可以使用Vue的条件渲染指令v-if和v-bind绑定class属性。

首先，在需要显示红点的地方添加一个span标签，并绑定一个变量isShow来控制它的显示和隐藏：

<span class="red-dot" v-if="isShow"></span>

接着，在Vue实例中定义isShow变量，并根据业务逻辑动态修改它的值，比如：

new Vue({
  data: {
    isShow: false,
    messageCount: 0
  },
  watch: {
    messageCount: function(newVal) {
      this.isShow = newVal > 0;
    }
  }
})

这里使用了Vue的watch监听messageCount变量的变化，当它大于0时，将isShow设置为true，显示红点；否则，隐藏红点。

最后，在CSS中定义红点的样式：

.red-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: red;
}

这样就能实现消息提示红点了。