Vue学习笔记-生命周期

整体页面代码：

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加品牌</title>
</head>
<body>
<div id="app">
<h3>添加品牌</h3>
<form action="" method="post">
品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
描述信息：<textarea rows="5" cols="20" id="description" v-model="brand.description"
name="description"></textarea><br>
状态：
<input type="radio" name="status" v-model="brand.status" value="0">禁用
<input type="radio" name="status" v-model="brand.status" value="1">启用<br>
<input type="button" id="btn" @click="submitForm" value="提交">
</form>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data(){
return {
brand:{}
}
},
methods:{
submitForm(){
// 发送ajax请求，添加
var _this = this;
axios({
method:"post",
url:"http://localhost:8080/brand-demo/addServlet",
data:_this.brand
}).then(function (resp) {
// 判断响应数据是否为 success
if(resp.data == "success"){
location.href = "http://localhost:8080/brand-demo/brand.html";
}
})
}
}
})
</script>
</body>
</html>

posted @ 2023-05-17 18:10 锅巴编程阅读(11) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue学习笔记-快速入门

· Vue学习笔记-介绍&双向绑定

· Vue生命周期

· Vue生命周期钩子

· Vue生命周期

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）

阅读目录(Content)

此页目录为空

锅巴编程

念两句诗

Vue学习笔记-生命周期

整体页面代码：

公告

个人信息

日历

搜索

常用链接

最新随笔

积分与排名

随笔分类

随笔档案

文章分类

文章档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>添加品牌</title>
	</head>
	<body>
	<div id="app">
	<h3>添加品牌</h3>
	<form action="" method="post">
	品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
	企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
	排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
	描述信息：<textarea rows="5" cols="20" id="description" v-model="brand.description"
	name="description"></textarea><br>
	状态：
	<input type="radio" name="status" v-model="brand.status" value="0">禁用
	<input type="radio" name="status" v-model="brand.status" value="1">启用<br>
	<input type="button" id="btn" @click="submitForm" value="提交">
	</form>
	</div>
	<script src="js/axios-0.18.0.js"></script>
	<script src="js/vue.js"></script>
	<script>
	new Vue({
	el: "#app",
	data(){
	return {
	brand:{}
	}
	},
	methods:{
	submitForm(){
	// 发送ajax请求，添加
	var _this = this;
	axios({
	method:"post",
	url:"http://localhost:8080/brand-demo/addServlet",
	data:_this.brand
	}).then(function (resp) {
	// 判断响应数据是否为 success
	if(resp.data == "success"){
	location.href = "http://localhost:8080/brand-demo/brand.html";
	}
	})
	}
	}
	})
	</script>
	</body>
	</html>