<!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. Vue.js基础语法（二）组件

    vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 把一段经常要用的东 ...

  2. #include stdio.h(3)

    #include <stdio.h> int main() { /* * ** *** **** ***** */ ;a<;a++) { printf("\n") ...

  3. 用canvas绘制一个简易时钟

    在见识了html5中canvas的强大,笔者准备制作一个简易时钟. 下面就是成果啦,制作之前我们先分析一下,绘制一个时钟需要做哪些准备. 一 . 1.首先这个时钟分为表盘,指针(时针,分针,秒针)和数 ...

  4. bai_du 采集代码（已过期）

    <?php $url = "http://www.baidu.com/s?wd=site:www.xxxxxx.com+inurl:hot&tn=baidulaonian&am ...

  5. 解决 MVC4 Code First 数据迁移 数据库发生更改导致调试失败解决方法（二）

    文章转载自:http://www.cnblogs.com/amoniyibeizi/p/4486617.html 前几天学MVC过程中,遇到更改Model类以后,运行程序就会出现数据已更改的问题导致调 ...

  6. python socket实现多个连接

    socket实现多个连接 前戏很重要~~ 在实现多个连接之前,先实现下多次发送和接收数据. 如果要多次接收数据,那么在服务器端的接收和客户端的发送部分就必须使用循环. 以下代码在python3.5下运 ...

  7. Struts2_用ModelDriven接收参数

    通过实现 ModelDriven 接口来接收请求参数,这种方法用的比较少,一般还是用前两种. 请求: <a href="user/user!add?name=xiaoer&ag ...

  8. 笨办法学Python（二十）

    习题 20: 函数和文件 回忆一下函数的要点,然后一边做这节练习,一边注意一下函数和文件是如何在一起协作发挥作用的. from sys import argv script, input_file = ...

  9. url网址解析的好帮手

    接下来进入node的重点,也就是介绍nodejs主要api的功能和如果使用,由于nodejs逐渐能满足这种高并发和大规模的场景.他才被更多的公司所采用 无论什么资源,一定要有明确的地址才有意义,在互联 ...

  10. Xamarin.Forms随手记

    1. 更新Android SDK要从VS的工具栏上SDK Manager那里更新,不要像我一样之前搞了好几份SDK放在不同的地方,结果把自己搞糊涂了,更新了半天(真的是花了半天时间)才发现更新的地方不 ...