Vue.js 提交表单

Vue.js 提交表单QQ:285679784欢迎加入博主CSDN资源QQ群799473954(附加信息:CSDN博客)一起学习!<!DOCTYPEhtml><html><head><metacharset=”utf-8″><title>Vue测试实例-Vue.js提交表单</title><script…

QQ:285679784   欢迎加入博主CSDN资源QQ群799473954(附加信息:CSDN博客)一起学习 !

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - Vue.js提交表单</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="form">
  <label for="username">昵称:</label>
  <input type="text" id="username" v-model.trim="username">
  <br>
  <label for="age">年龄:</label>
  <input type="number" id="age" v-model.number="age">
  <br>
  <label for="checkbox">单身:</label>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{
  
  { checked }}</label>
  <br>
  <label>喜欢:</label>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <br>
<input type="submit" v-on:click="submit"/>
  <br/>
  <br/>
  <span>昵称: {
  
  { username }}</span>
  <br>
  <span>年龄: {
  
  { age }}</span>
  <br>
  <span>单身: {
  
  { checked }}</span>
  <br>
  <span>喜欢: {
  
  { checkedNames }}</span>
</div>

<script>
//.number 如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值
//<input v-model.number="age" type="number">
//.trim 如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入
//<input v-model.trim="msg">
	
var vm=new Vue({
  el: '#form',
  data: {
	  //初始值
	  username:'username  ',
	  age:18,
	  checked : false,
      checkedNames: ['Runoob']
  },
	methods:{
		//提交表单
		submit:function(){
			var params=new Object();
			params.username=this.username;
			params.age=this.age;
			params.checked=this.checked;
			params.checkedNames=this.checkedNames;
			alert("formdata:"+JSON.stringify(params));
		}
	}
});
	
//vue外部获取vue内部值
console.log(vm.username);
console.log(vm.age);
console.log(vm.checked);
console.log(vm.checkedNames);
	
</script>
</body>
</html>

 

今天的文章Vue.js 提交表单分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/23842.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注