form表单button按钮，未成功跳转，自动刷新页面。

问题描述

• 在学习vue表单时，表单的提交按钮使用的是一个button标签，同时button也绑定了另外一个方法。该方法在浏览器的console中打印内容。在执行时，打印的内容一闪而过，表单页面也发生了刷新。

<form >
    {{ usrname}} ++ {{ psd }}
    <input type="text" name="" v-model='usrname'>
    <input type="text" name="" v-on:keyup.aaa='sub' v-model='psd'>
    <button  @click='sub' >提交</button>  //此处button未设置type值是问题的关键
</form>

 sub:function(){
    console.log('123'); //打印123会一闪而过,同时form表单刷新.
    }

理论原因

• 在ie中，button的默认type为button，而在其他浏览器中是submit.因此在点击该按钮时，会触发提交操作，并刷新表单页面。

解决办法

• 为button设置type值为button，则不会触发提交操作。若要提交则手动绑定触发方法。

<form >
    {{ usrname}} ++ {{ psd }}
    <input type="text" name="" v-model='usrname'>
    <input type="text" name="" v-on:keyup.aaa='sub' v-model='psd'>
    <button  type='button'  @click='sub' >提交</button>  //在此处设置type即可
</form>