zoukankan      html  css  js  c++  java
  • 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();  
                }  
            }  
        });  
  • 相关阅读:
    算法25-----位运算(2)-----案例
    算法24----重复子字符串
    算法23-------岛屿的最大面积 LeetCode 695
    算法22-----托普利茨矩阵leetcode766
    算法21----重塑矩阵 LeetCode566
    Python笔记25-----------创建二维列表【浅copy】和转置
    TensorFlow+实战Google深度学习框架学习笔记(7)-----队列与多线程
    TensorFlow+实战Google深度学习框架学习笔记(6)----神经网络经典损失函数
    Testing
    Spark简介
  • 原文地址:https://www.cnblogs.com/wuheng1991/p/7576096.html
Copyright © 2011-2022 走看看