表单input输入框有默认账号和密码的问题

今天遇到一个问题，就是表单数据中的用户名和密码我没有给默认值但是渲染出来在浏览器显示的时候出现了默认值。
样式：

  <form action="">
    账号：<input type="text" v-model="username"/> 
    密码：<input type="password" v-model="password" autocomplete="new-password"/>
  </form>

数据：

data() {
   return {
     username: '',
     password: '',
   };
 }

页面效果：

后来查阅资料发现是因为浏览器的缓存，以前进入其他页面可以保存了密码和账号，所以在进入此界面后就会把原来的数据进行填充，就是你没有对当前的数据进行赋值，它也会有默认值。
解决办法：
其实解决办法也非常简单，只要在密码的输入框的input标签后加上一个 autocomplete=“new-password” 属性，就能解决此问题！
修改后的代码：

  <form action="">
    账号：<input type="text" v-model="username"/> 
    密码：<input type="password" v-model="password" autocomplete="new-password"/>
  </form>

修改后的页面效果：

完美！！！