<!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. poj 1741 两点距离小于K（树DP）

    http://blog.csdn.net/woshi250hua/article/details/7723400 求两点间距离小于等于k的方案数 理一下思路: 求通过点A与另一点连接符合条件的个数 = ...

  2. mybatis springmvc批量删除 2最新

    service层: @Override public void batchDeletes(List list) { creditDao.batchDeletes(list); } 控制层control ...

  3. switch 和 if...else if 的区别

     为什么很多人用  if...else..if   而不使用   switch 1,if...else...if 只是单纯地一个接一个比较:if...else可能每个条件都计算一遍: 2,switch ...

  4. android错误整理

    1.Caused by: java.lang.IllegalStateException: Only fullscreen opaque activities can request orientat ...

  5. rpm打包工具

    http://fedoraproject.org/wiki/How_to_create_an_RPM_package # rpm --showrc|grep _topdir -14: _builddi ...

  6. 使用 javascript API -- fetch 实现文件下载功能

    下载原理 下载原理很简单,就是模拟 a 标签的点击下载,我们都知道 ajax 不支持下载文件功能,是因为 ajax 只能用来传输字符型数据,所以在过去无法使用 ajax 来下载文件. xhr2 可以把 ...

  7. 类型信息（RTTI和反射）——RTTI

    运行时类型信息可以让你在程序运行时发现和使用类型信息. 在Java中运行时识别对象和类的信息有两种方式:传统的RTTI,以及反射.下面就先来说下RTTI. 1.RTTI: RTTI:在运行时,识别一个 ...

  8. 整理齐全 - Vultr VPS自定义安装Windows ISO（2003/2012/2008/WIN7）

    最近公司有几个项目是需要在Windows VPS服务器中运行调试的,但是公司给予的成本有限,所以只能在Linux VPS中考虑,毕竟Linux服务器相比Windows系统便宜很多.开始我们运维部门考虑 ...

  9. TP5.1：模板继承（重要知识点）

    1.在app\index\controller文件夹新建一个名为Lyot(自定义)的控制器,在控制器中定义: 2.创建一个被继承的public(自定义)文件夹,里面有三个文件,分别是header.ht ...

  10. React怎么创建.babelrc文件

    在windows环境下做react开发其实是一件非常让人头疼的事,强烈建议使用Mac或者是Linux系统,否则真的是自己挖坑自己跳了. 不过,这里还是给大家说说如何在windows环境下新建一个.ba ...