<!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. hdu 3530 区间和在一定范围内最长区间

    http://acm.hust.edu.cn/vjudge/problem/11253 这题要找到区间和在[m,k]范围内的最长区间 用两个单调序列保存区间最大值和最小值.当最大值-最小值>k时 ...

  2. maven课程 项目管理利器-maven 1-2maven介绍和环境搭建

    maven简介: Maven是基于项目对象模型(POM),通过一小段描述信息来管理项目的构建.报告和文档的软件项目管理工具. 1.1 Maven安装文件夹的结构 bin 目录放置包含mvn的运行脚本 ...

  3. Python函数(3)

    一.装饰器 什么是装饰器,装饰器就是用于拓展原来函数功能的一种函数 装饰器就是用来为被装饰对象添加新功能的工具,装饰器本身可以是任意可调用对象,被装饰的对象也可以是任意可调用对象 装饰器遵循一个关键原 ...

  4. Docker 清理命令汇总

    杀死所有正在运行的容器 docker kill $(docker ps -a -q) 删除所有已经停止的容器 docker rm $(docker ps -a -q) 删除所有未打 dangling ...

  5. [SVN]TortoiseSVN工具培训5─常见问题解决

    1.文件提交时状态异常 产生原因:操作不当 解决方法:使用SVN的clean up命令 2.权限不足 产生原因:当前用户权限不足 解决方法:找配置管理员申请权限 3.网络故障 产生原因:无法访问到配置 ...

  6. DOM对象和js对象以及jQuery对象的区别

    DOM对象和js对象以及jQuery对象的区别 DOM对象和js对象以及jQuery对象的区别 一.DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际 ...

  7. java中将数组、对象、Map、List转换成JSON数据

    如果要将数组.对象.Map.List转换成JSON数据,那我们需要一些jar包: json-lib-2.4-jdk15.jar ezmorph-1.0.6.jar commons-logging.ja ...

  8. XFS： Cross Frame Script (跨框架脚本) 攻击。

    一.Cross Frame Script (跨框架脚本) 攻击什么是Cross Frame Script?很简单,做个实验就知道了.把下面的这段HTML代码另存为一个html文件,然后用ie浏览器打开 ...

  9. Eclipse下JRebel的安装和基本使用

    JRebel有什么用? 做Java Web开发,一个很头疼的事情是,修改了一个类以后,Tomcat必须重新启动. 工程规模小还好说,如果规模大了,重启一次动不动就是一分多钟.那么频繁重启就会导致大量的 ...

  10. HUE安装与使用

    HUE安装与使用 1.介绍 HUE是一个开源的Apache Hadoop UI系统,早期由Cloudera开发,后来贡献给开源社区.它是基于Python Web框架Django实现的.通过使用Hue我 ...