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>

 

posted @ 2017-11-01 10:15  匿名的girl  阅读(1444)  评论(0)    收藏  举报