vue事件的绑定

最新推荐文章于 2023-03-17 18:37:54 发布

转载最新推荐文章于 2023-03-17 18:37:54 发布 · 128 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangruifang/p/7765158.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用Vue.js实现的事件绑定实例，包括按钮点击、下拉框改变及表单提交等事件处理方式，并展示了如何利用Vue的方法进行响应。

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>事件绑定</title>
    <script src="js/vue.js"></script>
 </head>
 <body>
  <div id="container">
        <p>{{msg}}</p>
        <button v-on:click="handleClick">Click Me</button>
        <button @click="handleClick">Click Me</button>
        <h5>select</h5>
        <select v-on:change="handleChange">
            <option value="red">红色</option>
            <option value="green">绿色</option>
            <option value="pink">粉色</option>
        </select>
        <h5>表单提交</h5>
        <form v-on:submit.prevent="handleSubmit">
            <input type="checkbox" :checked="false" v-on:click="handleDisabled"/>
            是否同意本站协议
            <br>
            <button :disabled="isDisabled">提交</button>
        </form>
    </div>
    <script>
        new Vue({
            el:"#container",
            data:{
                msg:"Hello VueJs",
                isDisabled:false
            },
            //methods对象
            methods:{
                //通过methods来定义需要的方法
                handleClick:function(){
                    console.log("btn is clicked");
                },
                handleChange:function(event){
                    console.log("选择了某选项"+event.target.value);
                },
                handleSubmit:function(){
                    console.log("触发事件");
                },
                handleDisabled:function(e){
                    if(event.target.checked==true){
                        this.isDisabled =  true;
                    }
                    else{
                        this.isDisabled =  false;
                    }
                }
            }
        })
    </script>
 </body>
</html>