小记：vue的表单清除

最近做了一个表单查询的页面，需要实现查询功能的清空功能，将查询的所有信息置空。

<div id="show-list">

  <div id="query-condition">
    <div style="margin: 10px 0 10px 84px">
      <b>事件行为：</b>
      <select style="width: 200px;height: 30px; margin:0 150px 0 5px;">
        <option v-for="type in event_type">{{type.name}}</option>
      </select>
      <b>用户ID：</b>
      <input v-model="text" type="text" placeholder="用户ID" style="width: 200px;height: 30px; margin:0 149px 0 5px;padding-left: 3px">
      <b>UUID：</b>
      <input type="text" placeholder="UUID" style="width: 200px;height: 30px; margin-left: 5px;padding-left: 3px">
    </div>

<div class="btn1" style="margin-bottom: 20px">
  <button  class="btn btn-primary" type="button" style="margin-right: 50px;outline: none">查询</button>
  <button class="btn btn-default" type="button" style="outline: none" @click="resetAll">清空</button>

</div>

JS代码：

methods: {

    //清空input和select中的内容
    resetAll(){
  $('#show-list').find('input,select').each(function () {
        $(this).val('');
  });
    },

优点：代码量少，很容易理解，兼容性好

缺点：所有内容都置空了，包括之前默认显示的内容。