vue form表单绑定事件与方法

    使用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();
            }
        }
    });  
时间: 2024-08-01 21:26:58

vue form表单绑定事件与方法的相关文章

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

提交form表单的时候瑶族一些简单的验证,验证完后才能提交,避免无效提交. 1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的头部插入一个js方法: function checkUser(){ var result = document.getElementById("userid").value; var password = document

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

在SharePoint的使用过程中,我们经常需要为表单页面做一些特殊处理,比如说新建页面的时候有多选项的字段,但是只能选择指定数量的选项,尤其在新闻列表或者调查列表等特殊场景中,广泛使用. 下面,我们就演示一下,如何利用JavaScript脚本,在前台处理这样的问题:特别强调,如果User是比较熟悉Web开发的高手,熟悉各种浏览器提供的前台修改Html页面的工具的话,这样的方式就属于小儿科了,我们就需要在列表上绑定EventReceiver,强制不符合条件的数据,不能保存. 创建示例需要的列表,

php 解决和避免form表单重复提交的方法

在提交表单的时候,可能遇到网速等导致页面突然加载变慢,用户重复地点击提交按钮,将在数据库产生多条数据,导致不可控情况. 比如下面的情况就会导致表单重复提交: 点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. 使用浏览器历史记录重复提交表单. 浏览器重复的HTTP请求. 网页被恶意刷新. 下面是几种解决的方法: 一:利用js设置按钮点击后变成灰色 $(document).ready(function(){ $(input:submit).click(){ s

form表单乱码的解决方法

首先 get,和 post 的区别: 1> get 请求的请求参数附在地址栏的url之后,post请求是通过http post 机制将表单各个字段及其内容放在Html header 里面发送到所请求的action中2>get 请求的数据量小,要小于2kb,3>因为get 请求会将请求参数以及内容附在地址栏后面,所以不安全性会更高. 针对get 请求和post请求乱码分析:如果是get请求,服务器是由tomcat默认的编码格式,或者你设定的编码格式去重新编码,也就是说,这个编码是由tomc

C# 模拟Form表单上传文件方法

public static string UploadFile(string url, HttpPostedFileBase file,string FieldName) { Stream fs = file.InputStream; if (!fs.CanRead) { return ""; } byte[] buffer = new byte[fs.Length]; fs.Read(buffer, 0, (int)fs.Length); fs.Close(); string bou

form表单提交方式

无刷新页面提交表单 表单可实现无刷新页面提交,无需页面跳转,如下,通过一个隐藏的iframe实现,form表单的target设置为iframe的name名称,form提交目标位当前页面iframe则不会刷新页面 <form action="/url.do" method="post" target="targetIfr"> <input type="text" name="name"/&g

Extjs form 表单的 submit

说明:extjs form表单的提交方式是多种多样的,本文只是介绍其中的一种方法,本文介绍的方法可能不是完美的,但是对于一般的应用应该是没有问题的.     本文包括的主要内容有:form面板设计.form字段值的获取.后台处理代码以及返回数据的获取 1.form表单设计 var panelItem = Ext.create('Ext.form.Panel', { border: false, id:'formMain', layout: 'form', items: [ { xtype: 'f

不使用ASP.NET服务器端控件(包括form表单不加runat=&quot;server&quot;)来触发.cs里的事件(方法),(适用于有代码洁癖者)。

很多时候,我们使用服务器端控件写出的代码,会给我们生成一些很多我们看不懂的代码(初学者),但是有时候我们并不需要这些代码(业务需求不同),对于生成的一些代码感到多余.所以我就开始想,有没有一种可能:不使用服务器端控件(包括form表单不加runat="server"属性)来触发后台写的某一个方法或事件(ASP.NET的事件实际上是使用事件机制来驱动的).经过测试是可以的. 原理:使用反射驱动方法. 步骤:    1.手写一个提交表单的js函数(可以使用asp.net的__dopostB

form表单中控件较多,加载完成后切换页面都很慢的解决方法

form表单中控件较多,加载完成后点击都很慢,为什么?我一页面中form表单里面上百个控件(如input.select.radio.checkbox等),还有一些js脚本,加载速度还可以,都能全部显示完毕,但是点击一些事件(如切换tab.关闭模拟框,点击radio等)都非常慢,不知道为什么? 当我采用inprivate模式浏览时,以上动作都很快,但老用inprivate也麻烦,有何办法解决. 按理说form都在客户端显示完全了,其他操作都是客户端的操作阿应该不慢才对阿/. ------解决思路-