使用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>
    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 form表单绑定事件与方法的更多相关文章

  1. 20181019 记录 window.setTimeout('dofunction()',2000); - layui form 表单提交 事件 - F11全屏 事件 window.onresize

    1 延时事件 window.setTimeout('dofunction()',2000); 函数外面要有引号 如果没有引号 就不能延时执行 应该是内容进行eval,所以外层不是传递字符串的话,外层函 ...

  2. form表单submit事件

    form表单submit事件同时会触发form表单中button按钮的click事件 <!DOCTYPE html> <html> <head> <meta ...

  3. vue -- v-model 表单绑定

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 使用js提交form表单的两种方法

    提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用sub ...

  5. form表单重置、清空方法记录

    myform 是form的id属性值 1.调用reset()方法 function fomrReset() { document.getElementById("myform"). ...

  6. vue form表单上传文件

    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js">< ...

  7. Ajax提交Form表单的一种方法

    待提交的表单 <form id="updatePublicKey" enctype="multipart/form-data"> <div c ...

  8. Django 构建模板form表单的两种方法

    通常情况下,我们想构建一张表单时会在模板文件login.html中写入 <form action="/your-name/" method="post"& ...

  9. SharePoint 使用脚本为表单绑定事件

    在SharePoint的使用过程中,我们经常需要为表单页面做一些特殊处理,比如说新建页面的时候有多选项的字段,但是只能选择指定数量的选项,尤其在新闻列表或者调查列表等特殊场景中,广泛使用. 下面,我们 ...

随机推荐

  1. jsdoc注释规范工具(使用 JSDoc 3 自动生成 JavaScript API 文档)

    安装和使用规范见:http://moodpo.com/archives/jsdoc3-tutorial.html 实例: /** * 模块调用方法 * * * @param {string} modu ...

  2. python 发送邮件 带附件

    # coding:utf-8 # __author__ = 'Mark sinoberg' # __date__ = '2016/5/26' # __Desc__ = 实现发送带有各种附件类型的邮件 ...

  3. 服务端测试环境hosts配置检查脚本

    [本文出自天外归云的博客园] 问题 由于A测试环境和B测试环境相互耦合,B测试环境切换导致我方测试环境需要更改后台服务器的响应配置.若多台服务器中有一台服务器没有更改配置,则在测试过程中将会出现问题. ...

  4. SQLite 入门教程一 基本控制台(终端)命令

    一.基本简介 SQLite 是一个自持的(self-contained).无服务器的.零配置的.事务型的关系型数据库引擎.因为他很小,所以也可以作为嵌入式数据库内建在你的应用程序中.SQLite 被应 ...

  5. tf.placeholder

    tf.placeholder placeholder( dtype, shape=None, name=None ) 功能说明: 是一种占位符,在执行时候需要为其提供数据 参数列表: 参数名 必选 类 ...

  6. django使用email进行身份验证(转载)

    版权所有,转载请注明出处:http://guangboo.org/2013/03/27/authentication-using-email-in-django django自带的验证功能免去了我们的 ...

  7. mybatis批量更新的两种实现方式

    mapper.xml文件,后台传入一个对象集合,另外如果是mysql数据库,一点在配置文件上加上&allowMultiQueries=true,这样才可以执行多条sql,以下为mysql: & ...

  8. 纯CSS3打造非常炫的加载动画

    纯css3打造的一款非常炫的加载图.用在需要一定时间加载的地方非常合适.先上效果图: 点击这里在线预览 代码非常简单.没有用任何javascript代码.纯css3实现. html代码: <di ...

  9. corntab被黑记录

    多出来的corntab 最近服务器经常出现负载过高的情况,经过运维排查,出现了一个corntab定时任务 不是开发的锅,别背 一开始运维认为是这个定时任务是我们开发的. 排查后,明确了服务器是被黑了. ...

  10. Beaglebone Black教程Beaglebone Black中的Cloud9 IDE基本使用

    Beaglebone Black教程Beaglebone Black中的Cloud9 IDE基本使用 ​Beaglebone Black中的Cloud9 IDE基本使用 Cloud9是集成在Beagl ...