<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title>快速入门</title>
<script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
<!--//在应用验证方法时必须加上 return 方法名称-->
<form action="http://www.itheima.com" method="post" onsubmit="return checkForm()">
<input type="submit" value="提交checkForm">
</form>
<br>
<br>
<div id="appone">
<form @submit.prevent="addOne" action="http://www.itheima.com" method="post">
<input type="submit" value="提交addOne">
</form>
</div>
<br>
<br>
<!--
这个就是检测后在提交
-->
<div id="app">
<form @submit="addMemo($event)" action="http://www.itheima.com" method="post">
<input type="submit" value="提交addMemo">
</form>
</div>
<script>
//Vue
new Vue({
el: "#appone",
methods: {
addOne: function () {
alert("12345");
return false;
}
}
});
//Vue
new Vue({
el: "#app",
methods: {
addMemo: function (event) {
alert("12345");
// 阻止页面刷新或者阻止表单提交
event.preventDefault();
}
}
});
//传统js方式
function checkForm() {
alert(1);
//表单验证必须有一个明确的boolean类型返回值
//在应用验证方法时必须加上 return 方法名称
return false;
}
</script>
</body>
</html>
版权说明
文章采用： 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。版权声明：未标注转载均为本站原创，转载时请以链接形式注明文章出处。如有侵权、不妥之处，请联系站长删除。敬请谅解！
常见资源合集和破解 fmvvvteih...