【Vue】 -(7) 事件和方法

来源：互联网发布：淘宝质量问题赔钱编辑：程序博客网时间：2024/06/08 07:11

使用v-on绑定事件<button @click="hello">Hello</button><br /><button @click="say('I love you')">say</button><br />访问原生事件<button @click="do('Nihao',$event)">do</button><br />事件修饰符<br /><form v-on:submit.prevent="onSubmit" action="http://www.baidu.com"><a @click.stop="doThis">阻止单击事件冒泡</a><input type="submit" value="提交事件不再负载页面" /><input v-on:keyup.enter="submit" type="submit" value="只有在keyup等于enter才提交"></form><br /><br />表单控件绑定:使用V-model进行双向绑定,处理一些极端的需求,如下：<span>Message is:{{message}}</span><br /><input type="text" v-model="message" placeholder="Edit me" /><br /><br /><br />单个多选框：逻辑值<input type="checkbox" id="checkbox" v-model="checked" value="游泳"/>游泳？<label for="checkbox">{{checked}}</label><br /><br /><br /><br />绑定到数组:不是逻辑值，是value的值<input type="checkbox" value="A" v-model="model" id="A" /><label for="A">A</label><input type="checkbox" value="B" v-model="model" id="B" /><label for="B">B</label><input type="checkbox" value="C" v-model="model" id="C" /><label for="C">C</label><br /><span>selcted:{{model | json}}</span>单选框:<br /><input type="radio" value="男" v-model="sex" />男<input type="radio" value="女" v-model="sex" />女<br /><span>{{sex}}</span>下拉框:<br /><select v-model="selected" multiple>  <option selected>A</option>  <option>B</option>  <option>C</option></select><br><span>Selected: {{ selected | json }}</span><!-- 在 "change" 而不是 "input" 事件中更新 --><input v-model="msg" lazy><span>{{msg}}</span><br /><br /><input v-model="age" number><span>{{age}}</span>

对应的js

var vm=new Vue({el:'#app',data:{text:'Hello',model:[]},methods:{hello:function(){alert(this.text+" Vue.js");},say:function(text){alert('say'+text);},do:function(text,event){alert(text);event.preventDefault();}}});

0 0