VUE 回車換行提交表單 跑馬燈效果 只允許文字框中輸入0-9數字
阿新 • • 發佈：2018-12-18
匯入vue.js
<script src="vue-2.5.17.js"></script>
1.回車換行 提交表單
<div id="app"> <input type="text" v-model="name" ref="panel" @keydown.13="mouse($refs.panel)" >{{name}}<br> <input type="password" v-model="pwd" ref="panel2" @keydown.13="mouse($refs.panel2)"> {{pwd}}<br> <input type="submit" value="heh" /><br> </div> <script src="vue-2.5.17.js"></script> <script type="text/javascript"> // 生成一個Vue例項 var app = new Vue({ el:"#app", // el,即element。要渲染的的頁面元素 data:{ // 資料 name:"", pwd:"" }, methods:{ mouse(e){ console.log(e) var inputs = document.getElementsByTagName("input"); //獲取登入頁面的input標籤 for(var i = 0;i<inputs.length;i++){ //迴圈input標籤的數量 // 如果是最後一個，則焦點回到第一個。（這個你可以選擇去掉） if(i==(inputs.length-1)){ inputs[0].focus(); break; }else if(e == inputs[i]){ console.log("點選事件匹配") var type=inputs[i+1].type if(type!='submit'){ console.log(inputs[i+1].type+"z") inputs[i+1].focus(); break; } if(type==='submit'){ console.log(inputs[i+1].type+"l") document.getElementById("myForm").submit(); break; } break; } } } } }) </script>
- 文字框只允許輸入0-9數字
0-9<br> <input type="text" @keydown="show($event)"><br> <script type="text/javascript"> // 生成一個Vue例項 var app = new Vue({ el:"#app", // el,即element。要渲染的的頁面元素 data:{}, methods:{ show(e){ console.log(e.keyCode) var code= e.keyCode if(code>=48&&code<=57){//0-9數字對應的ascii碼 }else if(code===8){ //允許文字框刪除 }else{ e.preventDefault() } } } }) </script>
- 跑馬燈
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑馬燈效果</title> <script src="js/vue.js"></script> </head> <body> <!--容器--> <div id="app"> //點選事件繫結 <br> <input type="button" value="浪起來" @click="lang"> <h4>{{msg}}</h4> </div> <script> // 建立一個vue例項 var vm=new Vue({ el:'#app', // 繫結id為appid容器 data:{ msg:'---1234567---' }, methods:{ lang(){ _this=this //將this給到_this然後傳入函式內 setInterval(function () { //定時任務 //console.log(_this.msg); var first=vm.msg.substring(0,1); var end=_this.msg.substring(1); _this.msg=end+first; },500); } } }) </script> </body> </html>