VUE：事件处理和表单输入绑定
Posted it-taosir
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VUE：事件处理和表单输入绑定相关的知识，希望对你有一定的参考价值。
事件处理
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>07_事件处理</title> </head> <body> <!-- 1.绑定监听： v-on:xxx="fun" @xxx="fun" @xxx="fun(参数)" 默认事件形参：event 隐含属性对象：$event 2.事件修饰符 .prevent：阻止事件的默认行为 event.preventDefault() .stop：停止事件冒泡 event.stopPropagation() 3.按键修饰符 .keycode：操作的是某个keycode值的键 .enter：操作的是enter键 --> <div id="example"> <h2>1.绑定监听</h2> <button @click="test1">test1</button> <button @click="test2(‘taosir‘)">test2</button> <!-- 没有其他参数，$event不写也可以--> <button @click="test3($event)">test3</button> <button @click="test4(123,$event)">test4</button> <h2>2.事件修饰符</h2> <div style="width: 200px;height: 200px;background: red" @click="test5"> <!-- @click.stop停止事件冒泡 --> <div style="width: 100px;height: 100px;background: blue;" @click.stop="test6"></div> </div> <a href="http://www.baidu.com" @click.prevent="test7">去百度</a> <h3>3.按键修饰符</h3> <input type="text" @keyup.13="test8" /> <input type="text" @keyup.enter="test8" /> </div> <script type="text/javascript" src="../js/vue.js" ></script> <script> new Vue({ el:‘#example‘, data:{ test1(){ alert(‘test1‘) }, test2(msg){ alert(‘test2：‘+msg) }, test3(evnet){ alert(event.target.innerHTML) }, test4(number,event){ alert(number+‘：‘+event.target.innerHTML) }, test5(){ alert(‘out‘) }, test6(){ //event.stopPropagation() alert(‘inner‘) }, test7(){ //event.preventDefault() alert(‘test点击了‘) }, test8(){ // if(event.keyCode===13){ // //通过event.keyCode查询keyCode // alert(event.target.value+‘ ‘+event.keyCode) // } alert(event.target.value+‘ ‘+event.keyCode) } } }) </script> </body> </html>
表单输入绑定
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>08_表单输入绑定</title> </head> <body> <!-- 1.使用v-model（双向数据绑定）自动手机数据 text/textarea checkbox radio select --> <div id="demo"> <form action="/xxx" @submit.prevent="handleSubmit"> <span>用户名：</span> <input v-model="username"/><br /> <span>密码：</span> <input type="password" v-model="pwd"/><br /> <span>性别：</span> <input type="radio" id="female" value="女" v-model="sex"/> <label for="female">女</label> <input type="radio" id="male" value="男" v-model="sex"/> <label for="male">男</label><br /> <span>爱好：</span> <input type="checkbox" id="basket" value="篮球" v-model="likes"/> <label for="basket">篮球</label> <input type="checkbox" id="foot" value="足球" v-model="likes" /> <label for="foot">足球</label> <input type="checkbox" id="pingpang" value="乒乓" v-model="likes" /> <label for="pingpang">乒乓</label><br /> <span>城市：</span> <select v-model="cityId"> <option value="">未选择</option> <option :value="city.id" v-for="(city,index) in allCitys">{{city.name}}</option> </select><br /> <span>介绍</span> <textarea rows="10" v-model="desc"></textarea><br /> <input type="submit" value="注册" /> </form> </div> <script type="text/javascript" src="../js/vue.js" ></script> <script> new Vue({ el:"#demo", data:{ username:‘‘, pwd:‘‘, sex:‘女‘, likes:[‘足球‘], allCitys:[{id:1,name:‘taosir‘},{id:2,name:‘moer‘},{id:3,name:‘vue‘}], cityId:‘3‘, desc:‘请输入描述‘ }, methods:{ handleSubmit(){ console.log(this.username,this.pwd,this.sex,this.likes,this.cityId,this.desc) } } }) </script> </body> </html>
以上是关于VUE：事件处理和表单输入绑定的主要内容，如果未能解决你的问题，请参考以下文章