vue+elementui，使用label替代placeholder

先定义label和input两个标签，注意这两个组件必须在同一个父组件下。

关键部分在于下列的 {z-index: 1;}
它可以使label显示在input之上。

效果显示

placeholder除了显示文本之外，点击该input时placeholder文本会消失。
那么需要两个主要的input属性@focus和@blur。

这两个方法写在method() {} 里面：

	CheckAndChangeNicknameStatus: function () {
        let nickname = document.getElementById('nickname');
        console.log("nickname.value.length", nickname.value.length);
        if (nickname.value.length !== 0) {
          this.nicknameStatus = true;
          return;
        }
        this.nicknameStatus = false;
      },
      nicknameOnFocus: function () {
        this.CheckAndChangeNicknameStatus();
        console.log('聚焦');
        this.inputPlaceholderShowStatus = false;
      },
      nicknameOnBlur: function () {
        this.CheckAndChangeNicknameStatus();
        console.log('散去');
        console.log('nicknameStatus', this.nicknameStatus);
        this.inputPlaceholderShowStatus = !this.nicknameStatus;
      }

而主要控制label是否显示，取决于是否
this.inputPlaceholderShowStatus = true;
而这个inputPlaceholderShowStatus属性与label的v-if="inputPlaceholderShowStatus"绑定。

补充：
v-if和v-show这两个需要进一步了解。