这是我的代码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>中国工程院无线投票系统</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="container" id="login">
    <div class="col-md-6 col-md-offset-3">
        <div class="page-header">
            <h1>中国工程院无线投票系统</h1>
        </div>
        <form>
            <div class="form-group">
                <label>用户名</label>
                <div class="input-group">
                    <div class="input-group-addon"><i class="glyphicon glyphicon-user"></i></div>
                    <input type="text" v-model="account.username" class="form-control" placeholder="Username" required
                           autofocus>
                </div>
            </div>

            <div class="form-group">
                <label>密码</label>
                <div class="input-group">
                    <div class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></div>
                    <input type="password" v-model="account.password" class="form-control" placeholder="Password"
                           required>
                </div>
            </div>

            <button v-on:click="validate" class="btn btn-lg btn-primary btn-block">登录</button>
        </form>
    </div>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="js/login.js"></script>
</body>
</html>

在登录中.js文件:

var login = new Vue({
    el:"#login",
    data:{account:{}},
    methods:{
        validate:function () {

        },
        say: function (){

        }
    }
});

一开始,我认为这与"validate"方法中的代码有关.然而,在我删除了里面的所有代码之后,当我点击按钮时,页面仍然会刷新,这是不应该发生的.

推荐答案

你应该在<button>的基础上再加type="button".

如果在<form>中没有指定<button>中的type,默认情况下,它的行为类似于提交按钮,刷新页面.

Docs:

<type="submit">按钮将表单数据提交给服务器.如果未指定属性,或者属性动态更改为空值或无效值,则这是默认值.

Vue.js相关问答推荐

为什么具有Piniastore 的Vue组件的react 性需要计算(computed)属性?

如何根据数据库中的条件在vue中创建类

使用内部方法创建计算(computed)属性是否合法?

Nuxt3-Vue中的useRoute和useRouter有什么区别

在 vue.js 中添加新类时样式不适用

为什么在 Vue.js 中使用 `var` 关键字?

Vuejs中的条件a href

在下拉菜单上使用箭头键滚动

Nuxt 打开链接到模态

我可以使用 vue.js v-if 来判断值是否存在于数组中

全局禁用 vuetify 组件的涟漪效应

store 的 Vuex Classic 模式已弃用,将在 Nuxt 3 中删除

Modal 内部的 Vue.js AJAX 调用

基于条件的VueJS HTML元素类型

VS代码中的红点是什么意思

样式化 Vue 插槽

try 通过 Vue.js 中的渲染传递props并观察它们

表格行上的 Vuejs 转换

我们可以像在 Angular 中一样创建 Vue.js 组件时将 HTML、JS 和 CSS 文件分开吗?

超过最大调用堆栈大小 Vuetify