# vue中使用refs 完成密码框明密文切换 # vue通过ref改变input的type template: ``` <pre class="calibre13">``` <span class="token"><</span>input type<span class="token">=</span><span class="token4">"text"</span> ref<span class="token">=</span><span class="token4">"input"</span> v<span class="token">-</span>model<span class="token">=</span><span class="token4">"inputPad"</span> @focus<span class="token">=</span><span class="token4">"zfocus"</span> @blur<span class="token">=</span><span class="token4">"zblur"</span><span class="token">></span> ``` ``` data: ``` <pre class="calibre13">``` inputPad<span class="token1">:</span> <span class="token4">"请输入支付密码"</span><span class="token1">,</span> ``` ``` methods: ``` <pre class="calibre13">``` <span class="token3">zfocus</span><span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token2">this</span><span class="token1">.</span>$refs<span class="token1">.</span>input<span class="token1">.</span>type <span class="token">=</span> <span class="token4">"password"</span> <span class="token2">if</span> <span class="token1">(</span><span class="token2">this</span><span class="token1">.</span>inputPad <span class="token">==</span> <span class="token4">"请输入支付密码"</span><span class="token1">)</span> <span class="token1">{</span> <span class="token2">this</span><span class="token1">.</span>inputPad <span class="token">=</span> <span class="token4">''</span> <span class="token1">}</span> <span class="token1">}</span><span class="token1">,</span> <span class="token3">zblur</span><span class="token1">(</span><span class="token1">)</span> <span class="token1">{</span> <span class="token2">if</span> <span class="token1">(</span><span class="token2">this</span><span class="token1">.</span>inputPad <span class="token">==</span> <span class="token4">''</span><span class="token1">)</span> <span class="token1">{</span> <span class="token2">this</span><span class="token1">.</span>inputPad <span class="token">=</span> <span class="token4">"请输入支付密码"</span> <span class="token2">this</span><span class="token1">.</span>$refs<span class="token1">.</span>input<span class="token1">.</span>type <span class="token">=</span> <span class="token4">"text"</span> <span class="token1">}</span> <span class="token1">}</span><span class="token1">,</span> ``` ``` **type** 规定 input 元素的类型, input 密码切换是 在text和密码切换中自由切换