11.VUE學習之提交表單時拿到input裏的值
阿新 • • 發佈：2019-01-14
提交表單 裏的 true tde net class sheet 阻止 orm
<!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裏的值