Vue2 指令v-on v-model 各种表单控件

1.绑定事件指令v-on

<div id="app">
    <input type="number" v-model="myNumber">
    <button v-on:click="add">加1</button>
    <button @click="reduce">减1</button>
    <br><br>
    <input type="number" v-model="one" @keyup.enter="calculate"> +
    <input type="number" v-model="two" @keyup.13="calculate" @blur="calculate"> =
    {{ result }}
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            myNumber:10,
            one:1,
            two:2,
            result:3
        },
        methods:{
            add:function(){
                this.myNumber ++;
            },
            reduce:function(){
                this.myNumber --;
            },
            calculate:function(){
                this.result=parseInt(this.one) + parseInt(this.two);
            }
        }
    })
</script>

keyup事件，键值表：

2.表单各种控件的使用 v-model

<div id="app">
<h3>注册会员</h3>
<p>
    <label for="nickname">昵称 v-model：</label>
    <input type="text" id="nickname" v-model="nickname"> {{ nickname }}
</p>
<p>
    <label for="email">邮箱 v-model.lazy：</label>
    <input type="email" id="email" v-model.lazy="email"> {{ email }}
</p>
<p>
    <label for="age">年龄 v-model.number：</label>
    <input type="number" id="age" v-model.number="age" @keyup="isAdultOrNot" @click="isAdultOrNot"> {{ age }}
</p>
<p>
    <label for="memo">个人说明 v-model.trim：</label>
    <textarea rows="3" cols="30" id="memo" v-model.trim="memo"></textarea> {{ memo }}
</p>

<p>
    <label>性别：</label>
    <label><input type="radio" id="male" value="male" v-model="sex">男</label>
    <label><input type="radio" id="female" value="female" v-model="sex">女</label>
    <label><input type="radio" id="secret" value="secret" v-model="sex">保密</label> {{ sex }}
</p>
<p>
    <label for="isAdult">你是成年人：</label>
    <input type="checkbox" id="isAdult" v-model="isAdult"> {{ isAdult }}
</p>
<p>
    <label for="country">国籍：</label>
    <select id="country" v-model="country">
        <option value="China">中国</option>
        <option value="USA">美国</option>
        <option value="UK">英国</option>
    </select> {{ country }}
</p>
<p>
    <label for="languages">擅长语言（可多选）：</label>
    <select id="languages" v-model="languages" multiple>
        <option value="Chinese">中文</option>
        <option value="English">英文</option>
        <option value="French">法文</option>
    </select> {{ languages }}
</p>
<p>
    <label>兴趣爱好：</label>
    <label for="reading"><input type="checkbox" id="reading" value="reading" v-model="hobbies" />读书</label>
    <label for="sports"><input type="checkbox" id="sports" value="sports" v-model="hobbies"  />运动</label>
    <label for="handmade"><input type="checkbox" id="handmade" value="handmade" v-model="hobbies" />手工</label>
    <label for="movie"><input type="checkbox" id="movie" value="movie" v-model="hobbies" />电影</label> {{ hobbies }}
</p>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            nickname:"",
            email:"",
            age:18,
            memo:"",
            sex:"",
            isAdult:true,
            country:"",
            languages:[],
            hobbies:[]
        },
        methods:{
            isAdultOrNot:function(){
                this.isAdult = (this.age >= 18);
            }
        }
    });
</script>