Question

嘿，我正在用表单构建vueapp，我想知道是否有办法使用.prevent内置的vueJS来防止html5表单的默认行为？我尝试了<form.prevent>和<form v-on:submit.prevent>，但无济于事。这里有什么帮助吗？

Answer 1

v-on指令（简写为@）用于将Vue实例方法或JS表达式绑定到事件：

将事件侦听器附加到元素。 […]表达式可以是方法名称，内联语句，如果存在修饰符，则可以省略。

因此，即使您未指定方法或表达式/内联语句，您的.prevent修饰符在任何情况下均应起作用：

new Vue({
  el: '#app',
  methods: {
    formSubmit() {
      console.log('form submitted');
    },
  },
});

<script src="https://unpkg.com/vue@2"></script>

<div id="app">
  <form @submit.prevent>
    <span>Form WITH submit.prevent and no expression attached</span>
    <button type="submit">Submit form</button>
  </form>
  <form @submit.prevent="formSubmit">
    <span>Form WITH submit.prevent</span>
    <button type="submit">Submit form</button>
  </form>
  <form @submit="formSubmit">
    <span>Normal form without prevent</span>
    <button type="submit">Submit form</button>
  </form>
</div>

防止Vue.js中的表单默认行为

1 个答案: