Vue中使用form表单提交刷新问题

vue中使用表单form默认提交行为是刷新一下,在这儿我们使用事件修饰符prevent来阻止form表单的默认行为

在@click后面跟上prevent 这样就可以阻止form表单默认刷新行为了

<input type="submit" value="提交" @click.prevent='had'>

案例如下

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="app">
    <form>
      <div>
        <span>个人简介:</span>
        <textarea v-model='texts'></textarea>
      </div>
      <div>
        <input type="submit" value="提交" @click.prevent='had'>
      </div>
    </form>
  </div>
  <script type="text/javascript" src="vue.js"></script>
  <script type="text/javascript">
    /*表单基本操作*/
    var vm = new Vue({
      el: '#app',
      data: {
        texts: '个人介绍'
      },
      methods: {
        had: function(){
          console.log(this.texts)
        }
      }
    });
  </script>
</body>
</html>

结果如下:
这儿点击 “提交”按钮,就不在是刷新表单了,而是执行点击事件方法里面的操作了
Vue中使用form表单提交刷新问题_第1张图片

你可能感兴趣的:(Vue)