vue form表单绑定事件与方法

最新推荐文章于 2023-11-26 16:30:52 发布

转载最新推荐文章于 2023-11-26 16:30:52 发布 · 1.8k 阅读

文章标签：

#javascript #json #ViewUI

本文介绍Vue.js中如何使用v-on绑定事件，包括访问原生事件、使用事件修饰符等技巧。同时，还详细讲解了表单控件的绑定方法，如使用v-model实现双向绑定，并展示了不同类型的表单元素绑定示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    使用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();  
            }  
        }  
    });