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

来源：互联网发布：微信小程序服务器php 编辑：程序博客网时间：2024/06/07 04:44

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>

阅读全文

0 0