【Vue】 -(7) 事件和方法
2016-04-26 14:40
369 查看
使用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();
}
}
});
相关文章推荐
- 【Vue】-(3) Vue与MVVM
- 【Vue】 -(4) 数据绑定语法
- 【Vue】-(5) 计算属性与class,style绑定
- 【Vue】 -(6) 条件渲染和列表渲染
- JSP技术
- html 的同一个div的单击和长按冲突解决方案
- H5 混合开发 输入法遮挡内容区域解决方法
- Struts2——1.创建Struts项目
- 初识CSS
- UITabbarController的UITabbarItem(例:"我的")点击时,判断是否登录
- IOS7以上用UINavigationController 导致tableview下移解决方法
- 解决Maven更新后错误Dynamic Web Module 3.0 requires Java 1.6 or newer
- ValueAnimator的介绍与使用
- UIImage加载图片的方式以及Images.xcassets对于加载方法的影响
- UISegmentedControl
- cocoapods was not able to update the 'master' repo.if it is a unexpected issue and persists you can
- 自定义EasyUI下拉单选和下拉多选控件
- Null value was assigned to a property of primitive type setter of
- android source bluetooth
- How to retrieve the Device Unique ID from android device