<!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. JS URL解析

    function urlParse(url) { try { var hostexp = /http\:\/\/([^\/]+)/; var hoststr = url.match(hostexp)[ ...

  2. [Maven] Project build error: 'packaging' with value 'jar' is invalid. Aggregator projects require 'pom' as packaging.

    将<packaging>jar</packaging> 改为<packaging>pom</packaging>

  3. [Cuckoo SandBox]注入原理篇

    1.LoadExe 接python版本 通过调用LoadExe去加载Dll进行注入 所以先看LoadExe 加载器的功能吧 通过python管道接收到  processID,ThreadID,路径 , ...

  4. 刚刚写的一个lua下解释csv的工具。

    csvtool = {} function csvtool:csv2table(filename) if type(filename) ~= "string" or filenam ...

  5. SaaS “可配置”和“多租户”架构的几种技术实现方式

    1.数据存储方式的选择 多租户(Multi-Tenant ),即多个租户共用一个实例,租户的数据既有隔离又有共享,说到底是要解决数据存储的问题. 常用的数据存储方式有三种. 方案一:独立数据库   一 ...

  6. 利用jQuery做登录界面的验证码

    主要是为了有效防止机器恶意注册,对某一个特定已注册用户用特定程序暴力破解方式进行不断的登陆尝试.验证码是现在很多网站注册/登录时必填的, 虽然对用户可能有点麻烦,但是对网站/社区来说这个功能还是很有必 ...

  7. UITabBarController动态添加TabBarItem

    NSArray *titles = @[L(@"首页"), L(@"新闻"), L(@"消息"), L(@"我的")]; ...

  8. 51NOD 1092 回文字符串 LCS

    Q:给定一个串,问需要插入多少字符才能使其成为回文串,也就是左右对称的串. 经典求LCS题,即最长公共子序列,不用连续的序列.考虑O(n^2^)解法,求LCS起码得有两个串,题中才给了一个串,另一个需 ...

  9. April 8 2017 Week 14 Saturday

    Life is the art of drawing without an eraser. 人生如画,落笔无悔. Yesterday I watched a film from Japan, Afte ...

  10. pat甲级1107

    1107 Social Clusters (30 分) When register on a social network, you are always asked to specify your ...