Vue.js 结合 Layui 实现表单提交

<div id='app'>
  <form class='layui-form' @submit.prevent='submitForm'>
    <div class='layui-form-item'>
      <label class='layui-form-label'>用户名</label>
      <div class='layui-input-inline'>
        <input type='text' v-model='username' class='layui-input'>
      </div>
    </div>
    <div class='layui-form-item'>
      <label class='layui-form-label'>密码</label>
      <div class='layui-input-inline'>
        <input type='password' v-model='password' class='layui-input'>
      </div>
    </div>
    <div class='layui-form-item'>
      <div class='layui-input-block'>
        <button class='layui-btn' lay-submit lay-filter='formDemo'>提交</button>
        <button type='reset' class='layui-btn layui-btn-primary'>重置</button>
      </div>
    </div>
  </form>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      username: '',
      password: ''
    },
    methods: {
      submitForm() {
        // 此处为表单提交方法
        console.log('提交表单')
      }
    }
  })
</script>