<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<title>vue</title>

	<link rel="stylesheet" href="">

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<!-- <script type="text/javascript" src="../js/vue.js"></script> -->

	<style type="text/css">

		.test{

			background-color:yellow;

		}

		.test2{

			font-size: 40px;

		}

		.green{

			color: green;

		}

	</style>

</head>

<body>

	<div id="vue">

		<h1 class="green" :class="hd">测试一下</h1>

		<input type="checkbox" v-on:click="test1()">is_test

		<input type="checkbox" >is_test2

		<form action="" @submit="getinputval">

			<!--绑定后,input里的值的变化,会赋值给下面data里的inputval/inputval2-->

			<input type="text" v-model="inputval" placeholder="请输入内容">

			<input type="text" v-model="inputval2" placeholder="请输入内容">

			<input type="submit" value="提交">

		</form>

	</div>

</body>

<script type="text/javascript">

	var app=new Vue({

		el:'#vue',

		computed:{

		},

		data:{

//		    这里的test,test2, green 指的是上面的style样式

			hd:{test:false,test2:false,green:false},

			a:123,

            inputval:'',

            inputval2:'',

		},

		methods:{

            test1:function(){

                console.log(this.a);

			    this.hd.test=true;

			    this.hd.test2=true;

			    this.hd.green=true;

            },

            getinputval(e){

				alert(this.inputval);

				alert(this.inputval2);

				e.preventDefault(); //阻止默认提交时刷新表单

			}

        }

	});

</script>

</html>

11.VUE学习之提交表单时拿到input里的值的更多相关文章

  1. 26.VUE学习之--提交表单不刷新页面,事件修饰符之使用$event与prevent修复符操作表单

    提交表单不刷新页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. Web jsp开发学习——Servlet提交表单时用法

     实现提交表单以后判断输入的信息是否符合条件    若符合条件   先新建servlet  Sevlet的两种声明方式,二选一即可  再到web.xml里注册   register.jsp就是表单的界 ...

  3. vue学习笔记(六)表单输入绑定

    前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...

  4. Ajax实现提交表单时验证码自动验证（原创自Zjmainstay）

    本文通过源码展示如何实现表单提交前,验证码先检测正确性,不正确则不提交表单,更新验证码. 1.前端代码 index.html <!DOCTYPE html> <html> &l ...

  5. POST方式提交表单时，后台接受实体如果继承了父类，将无法映射表单对应数据

    引言 刚才在做一个post提交表单时,我在表单里放了几个隐藏域用来存放数据,表单name属性和后台实体属性签名保持一致.只是后台Action参数包含继承关系,所以无法获取到表单对应的值.刚开始一直纳闷 ...

  6. php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别

    if(isset($_POST['submit'])) 它的意思是不是判断是否配置了$_POST['submit'] 这个变量呢?如果有这个变量 在执行其它代码 应该这样用if(isset($_POS ...

  7. submit()提交表单时，显示警示框

    我同事在实现submit()提交表单时,想要页面弹出警示框. 但是折腾了几小时后发现,submit()始终不执行. 她的代码如下: $(document).ready(function(){ $(&q ...

  8. 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值

    $(function () { var wait = $("<img src=\"\" alt=\"正在上传\"/>"); $( ...

  9. POST提交表单时EnType设置问题

    POST提交表单时EnType设置问题 首先知道enctype这个属性管理的是表单的MIME编码.共有三个值可选: 1.application/x-www-form-urlencoded 2.mult ...

随机推荐

  1. JavaScript 数组（Array）

    //声明方式 //调用 Array构造函数创建并赋值 var users = new Array(); //new 可以省略 ); //new 可以省略 var users3 = new Array( ...

  2. OC与JS交互之UIWebView

    随着H5的强大,hybrid app已经成为当前互联网的大方向,单纯的native app和web app在某些方面显得就很劣势.关于H5的发展史,这里有一篇文章推荐给大家,今天我们来学习最基础的基于 ...

  3. spring aop xml中配置实例

    http://blog.csdn.net/wangpeng047/article/details/8560694

  4. maven课程 项目管理利器-maven 3-2 maven自动建立目录骨架

    使用cmd创建maven目录的两种方式: 使用archetype插件 1 按照提示进行选择  步骤: a 进入指定目录 b mvn archetype:generate --创建项目目录 c ente ...

  5. 102001 E

    x轴上方给你n个点,m个水平杆子, 然后q组询问,每次询问一个点,问能看到多少个点. n,q<=40000,m<=5 自闭了呀,又写了个 for(int i=1;i<(1<&l ...

  6. oracle笔记2-多表查询和子查询

    --查询出当前用户下的所有表 select table_name from user_tables; --执行顺序原则:  from  where group by  having   select  ...

  7. jmeter之HTTP信息头管理器

    信息头管理器作用: HTTP信息头管理器在Jmeter的使用过程中起着很重要的作用,通常我们在通过Jmeter向服务器发送http请求(get或者post)的时候,往往后端需要一些验证信息,比如说we ...

  8. ES6相关特性(解构赋值)

    解构赋值:本质上是一种匹配模式,等号两边的模式相同,则左边的变量可以被赋予对应的值. 注意:null & undefined 不能解构赋值!!! 数组的解构赋值: let [a,[[b],c] ...

  9. MySQL入门很简单: 2 MySQL数据类型

    2. MySQL数据类型 2.1 整数类型 后面的是默认显示宽度: tinyint(4) smallint(6) mediumint(9) int(11) bigint(20) 2.2 浮点型和定点数 ...

  10. 罗技G502设置

    这个鼠标默认内置了3个档案模式,用G9键来调节. p2 蓝色 1个灯 p2 蓝色 2个灯 p3 蓝色 3个灯 如此循环设置