chromium内核浏览器缓存在vue中自动覆盖password

在360，chrome等浏览器登陆页面中，登录后会有提示是否保存，之后项目的页面中再次出现password属性的标签的话会在页面跳转过后自动将保存的账号密码加到input里面，最近正好碰到了这个问题，记录下，希望对其他人有所帮助。

登录代码  <input type="password" v-model="value" >

在vue中原生密码框的写法，现在在网上的普遍做法是加上readonly属性和设置autocomplete="off"属性，经过测试并不能达到想要的效果。

<input type="password" v-model="value" readonly autocomplete="off" onfocus="this.removeAttribute('readonly')"/>

这样设置之后,在后续页面中还是出现了密码覆盖的情况，经过探索，浏览器中出现密码缓存覆盖的情况，过程是页面渲染过后才会执行缓存覆盖的，focus执行之后才发生覆盖的情况，这样，由于网络问题并不能完全处理已经发生的问题，可以通过click事件代替focus事件。

<input type="password" v-model="value" readonly autocomplete="off" onclick="this.removeAttribute('readonly')"/>

在iview中，可以设置native修饰符

<Input type="password" v-model="value" readonly autocomplete="off" @click.native="handlePassword"/>

<script>
handlePassword(e) {
e.currentTarget.removeAttribute("readonly");
}
</script>