您好,登錄后才能下訂單哦!
一、鍵盤事件,當(dāng)按鍵盤時,在控制臺輸出提示
html 源碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>VueLearn-cnblogs/xpwi</title> <!--引入自定義的樣式--> <link rel="stylesheet" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> <!--引入 vue 核心 js--> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <!--vue-app 是根容器,定義一個 id,然后在 js 里操作--> <div id="vue-app"> <!--name 具體的值是在 js 中定義的--> <h3> 鍵盤 Events </h3> <label>姓名:</label> <input type="text" v-on:keyup="logName" /> <label>年齡:</label> <input type="text" v-on:keyup="logAge" /> </div> <!--引入自己的 js,注意必須寫在 body 標(biāo)簽里最后,因?yàn)楸仨毾燃虞d你的整個 HTML DOM,才回去執(zhí)行 vue 實(shí)例--> <script type="text/javascript" src="js/appEvent.js" ></script> </body> </html>
js 源碼:
//實(shí)例化 vue 對象 new Vue({ //注意代碼格式 //el:element 需要獲取的元素,一定是 html 中的根容器元素 el:"#vue-app", data:{ }, methods:{ logName: function(){ console.log("你這正在輸入名字!"); }, logAge: function(){ console.log("你這正在輸入年齡!"); } } });
上面代碼是當(dāng)用戶點(diǎn)擊輸入框后,只要按下鍵盤就會在控制臺打印一次提示,實(shí)際應(yīng)用的并不多,下面介紹當(dāng)用戶按下回車鍵時,才觸發(fā)
二、健值修飾符
下面在時間后面加上:.enter
就可以實(shí)現(xiàn)只監(jiān)聽 enter 鍵,就可以實(shí)現(xiàn),當(dāng)用戶在輸入完成,按下回車鍵時,觸發(fā)我們自定義的事件
<input type="text" v-on:keyup.enter="logName" />
三、雙向數(shù)據(jù)綁定 input,selecet,textarea
適用:input,selecet,textarea 三種標(biāo)簽
js 文件種拿到 html 文件種輸入的數(shù)據(jù),然后 html 中拿到 js 文件中的數(shù)據(jù)
源代碼 html 文件:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>VueLearn-cnblogs/xpwi</title> <!--引入自定義的樣式--> <link rel="stylesheet" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> <!--引入 vue 核心 js--> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <!--vue-app 是根容器,定義一個 id,然后在 js 里操作--> <div id="vue-app"> <!--name 具體的值是在 js 中定義的--> <h3> 鍵盤 Events </h3> <label>姓名:</label> <!--加一個 ref 用來在 js 文件中拿到 input 標(biāo)簽中輸入的內(nèi)容--> <input ref="userName" type="text" /> <label>年齡:</label> <input ref="userAge" type="text" v-on:keyup.enter="notice" /> <hr /> <span>已確認(rèn)信息:</span> <br /> 姓名:{{name}}<br /> 年齡:{{age}} </div> <!--引入自己的 js,注意必須寫在 body 標(biāo)簽里最后,因?yàn)楸仨毾燃虞d你的整個 HTML DOM,才回去執(zhí)行 vue 實(shí)例--> <script type="text/javascript" src="js/appEvent.js" ></script> </body> </html>
源代碼 js 文件:
//實(shí)例化 vue 對象 new Vue({ //注意代碼格式 //el:element 需要獲取的元素,一定是 html 中的根容器元素 el:"#vue-app", data:{ name : "", age : "" }, methods:{ notice: function(){ //console.log("你這正在輸入年齡!"); //this.name 是 js 文件上面定義的一個 name 變量 this.name = this.$refs.userName.value; this.age = this.$refs.userAge.value; alert("姓名:" + this.name + " 年齡:" + this.age); } } });
四、雙向數(shù)據(jù)綁定 input,selecet,textarea (二)
上面數(shù)據(jù)綁定是在按下 輸入回車鍵的時候,來回的同步數(shù)據(jù),下面介紹另一種方式,實(shí)現(xiàn)雙向數(shù)據(jù)綁定
雙向數(shù)據(jù)綁定第二種方法:
源代碼 html 文件:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>VueLearn-cnblogs/xpwi</title> <!--引入自定義的樣式--> <link rel="stylesheet" href="css/style.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" /> <!--引入 vue 核心 js--> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <!--vue-app 是根容器,定義一個 id,然后在 js 里操作--> <div id="vue-app"> <!--name 具體的值是在 js 中定義的--> <h3> 鍵盤 Events </h3> <label>姓名:</label> <!--加一個 ref 用來在 js 文件中拿到 input 標(biāo)簽中輸入的內(nèi)容--> <input ref="userName" type="text" v-model="name" /> <label>年齡:</label> <input ref="userAge" type="text" v-model="age"/> <hr /> <span>同步數(shù)據(jù):</span> <br /> 姓名:{{name}}<br /> 年齡:{{age}} </div> <!--引入自己的 js,注意必須寫在 body 標(biāo)簽里最后,因?yàn)楸仨毾燃虞d你的整個 HTML DOM,才回去執(zhí)行 vue 實(shí)例--> <script type="text/javascript" src="js/appEvent.js" ></script> </body> </html>
源代碼 js 文件:
//實(shí)例化 vue 對象 new Vue({ //注意代碼格式 //el:element 需要獲取的元素,一定是 html 中的根容器元素 el:"#vue-app", data:{ name : "", age : "" }, methods:{ notice: function(){ //console.log("你這正在輸入年齡!"); //this.name 是 js 文件上面定義的一個 name 變量 this.name = this.$refs.userName.value; this.age = this.$refs.userAge.value; alert("姓名:" + this.name + " 年齡:" + this.age); } } });
總結(jié)
以上所述是小編給大家介紹的Vue 框架之鍵盤事件、健值修飾符、雙向數(shù)據(jù)綁定,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。