vue div模拟input的placeholder属性

遇到一个 用div 仿制 input输入框的需求，还需要带有input的placeholder属性，第一次尝试监听dom的input事件，后面发现会有延迟，最后查到H5的data-属性
template：

   <div
     class="contenteditable-box"
     contenteditable="true"
     data-text="可编辑区域"
   >
   </div>

css:

<style lang="less">
   .contenteditable-box {
     width: 500px;
     height: 500px;
     &:focus{ outline: none; }
     &:empty:before{
       content:attr(data-text);
       color:rgb(191,191,191);
     }
   }
</style>

效果图：

这里content的内容，会随着dom节点的data-text属性的变化而变化，而data-text属性可以等于一个变量。