zoukankan      html  css  js  c++  java
  • 11.VUE学习之提交表单时拿到input里的值

    <!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>
    
  • 相关阅读:
    关于屏幕点亮和熄灭你所需要知道的
    关于handler的使用和理解
    关于Android Task的学习
    Android触摸屏幕事件总结
    Android工作问题总结
    Android生命周期总结
    Android中如何在子线程更新UI
    Eclipse中启动tomcat无效,而手动启动可以访问的原因
    使用Spring进行文件加载进内存
    spring集成quartz定时器的使用
  • 原文地址:https://www.cnblogs.com/haima/p/10265031.html
Copyright © 2011-2022 走看看