<!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. SSRS 参数 单选 多选

    前段时间 公司要求报表的选项可以多选. 知道需求后,研究了下实现. 首先我们创建一个报表,然后添加3个数据集,2个参数,如下图. DataSet1数据集:存放主数据. ddl_emplid数据集:存放 ...

  2. Java基础入门 - 标识符及其命名规范

    类名.变量名.方法名都称为标识符 标识符命名规范: 由字母(A-Z或a-z).数字.下划线(_)和美元符($)中的一种或多种组合而成 不可以数字开头 大小写敏感 关键字不能用作标识符 合法标识符如:D ...

  3. vue多个组件的过渡

    <transition name="component-fade" mode="out-in"> <component v-bind:is=& ...

  4. vue换一换功能原型

    <html> <meta charset="utf-8"> <head> <script src="https://cdn.bo ...

  5. 关于BaseServlet

    BaseServlet 是项目中所有servlet的父类,作用是为了让一个servlet可以同时处理多个请求,因为我们之前比如说完成对于商品的增删改查的时候,每一个需求就要创建一个servlet,这样 ...

  6. JavaMail 的简单使用

    概述 邮件功能模块在大多数网站中,都是必不可少的功能模块.无论是用户注册还是重置密码,邮件都是比较常用的一个方式.本文主要介绍 JavaMail 的简单使用,方便大家快速开发,供大家参考.完整的 de ...

  7. ajax请求传过来的json数据直接转成对应的实体类时出错:400 Bad Request 不进入controller

    今天开发过程中,在SpringMVC中的Action中处理前台ajax请求传过来的json数据直接转成对应的实体类时出错:400 Bad Request,后台也不报错,400指的的是请求无效(请求有语 ...

  8. powershell远程连接

    最近因为工作的需要看了看powershell相关的知识,个人总结了一点有关于powershell远程连接需要做的步骤,希望对别人有所帮助. 使用powershell远程连接,需要进行 设备的配置: 1 ...

  9. java IO流——字节流

    字节流主要操作byte类型数据,以byte数组为准,主要操作类有InputStream(字节输入流).OutputSteam(字节输出流)由于IputStream和OutputStream都是抽象类, ...

  10. IOS 弹框AlterView的使用（IOS8.0以前使用）UIAlertController(IOS9.0使用)

    #pragma mark - 代理方法 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath ...