Vue.js 提交表单

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

ChinaLzw

4272人浏览 · 2019-01-10 16:34:52

ChinaLzw · 2019-01-10 16:34:52 发布

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

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^