input的button类型和button标签的区别

先看问题

其中input的代码如下

<div class="form-group">
        <input type="button" value="添加" class="btn btn-primary" v-on:click="add()">
        <button class="btn btn-danger">重置</button>
</div>

button的代码如下

<div class="form-group">
        <button class="btn btn-primary" v-on:click="add()">
        <button class="btn btn-danger">重置</button>
</div>

造成该问题的原因是button的默认类型是submit，点击会触发提交事件，

解决方法：

• 在button标签中添加type="button"就OK了，
• 或者在点击事件中添加e.preventDefault()
  • 带参数调用，传最后一个参数$event
  • 无参数调用，直接给一个函数名，不带小括号
  • 利用vue修饰符，.prevent

对该图片的第二个问题见：
https://blog.csdn.net/szbszb1/article/details/108910423