《前端》Vue 常用特性--form

一、form表单操作

1 基于表单的基本操作

input单行文本（绑定一个数据即可）

textarea多行文本（绑定一个数据即可）

<input type="text" v-model="name">
<textarea v-model="textArea"></textarea>

radio单选框（绑定同一个数据）

<input type="radio" id="male" value="1" v-model="gender">
<label for="male">男</label>
<input type="radio" id="female" value="2" v-model="gender">
<label for="female">女</label>

checkbox多选框（绑定统一个数据（数组形式））

<input type="checkbox" id="ball" value="1" v-model="like">
<label for="ball">篮球</label>
<input type="checkbox" id="sing" value="2" v-model="like">
<label for="sing">唱歌</label>
<input type="checkbox" id="code" value="3" v-model="like">
<label for="code">写代码</label>

select下拉框（select绑定一个数据即可，下拉多选select添加multiple=“true”，绑定一个数组数据）

<span>职业：</span>
<!-- select绑定一个数据 -->
<select v-model="job">
    <option value="0">请选择职业..</option>
    <option value="1">教师</option>
    <option value="2">软件工程师</option>
    <option value="3">律师</option>
</select>
<span>职业多选：</span>
<!-- multiple="true"设置select多选，select绑定一个数组 -->
<select v-model="job2" multiple="true">
    <option value="0">请选择职业..</option>
    <option value="1">教师</option>
    <option value="2">软件工程师</option>
    <option value="3">律师</option>
</select>

完整例子：

<div id="app">
    <div>
        <span>姓名：</span>
        <!-- input绑定一个数据 -->
        <input type="text" v-model="name">
    </div>
    <div>
        <span>性别：</span>
        <!-- input绑定一个数据 -->
        <input type="radio" id="male" value="1" v-model="gender">
        <label for="male">男</label>
        <input type="radio" id="female" value="2" v-model="gender">
        <label for="female">女</label>
    </div>
    <div>
        <span>爱好：</span>
        <!-- input绑定一个数组 -->
        <input type="checkbox" id="ball" value="1" v-model="like">
        <label for="ball">篮球</label>
        <input type="checkbox" id="sing" value="2" v-model="like">
        <label for="sing">唱歌</label>
        <input type="checkbox" id="code" value="3" v-model="like">
        <label for="code">写代码</label>
    </div>
    <div>
        <span>职业：</span>
        <!-- select绑定一个数据 -->
        <select v-model="job">
            <option value="0">请选择职业..</option>
            <option value="1">教师</option>
            <option value="2">软件工程师</option>
            <option value="3">律师</option>
        </select>
        <span>职业多选：</span>
        <!-- multiple="true"设置select多选，select绑定一个数组 -->
        <select v-model="job2" multiple="true">
            <option value="0">请选择职业..</option>
            <option value="1">教师</option>
            <option value="2">软件工程师</option>
            <option value="3">律师</option>
        </select>
    </div>
    <div>
        <span>个人介绍：</span>
        <!-- textarea绑定一个数据 -->
        <textarea v-model="textArea"></textarea>
    </div>
    <button @click="handel">提交</button>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            name:"",
            gender:"",
            like:[],
            job:"0",
            job2:[],
            textArea:""
        },
        methods:{
            handel:function () {
                alert(this.name+""+this.gender+""+this.like+""+this.job+""+this.job2+""+this.textArea);
            }
        }
    })
</script>

表单域修饰符

.number ：使得输入的数据转化为数值

<input type="text" v-model.number="num2">

<div id="app">
    <div>
        <input type="text" v-model="num1">
        <button @click="handel">+13</button>
        {{num1}}
    </div>
    <div>
        <input type="text" v-model.number="num2">
        <button @click="handel2">+13</button>
        {{num2}}
    </div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            num1:'',
            num2:'',
        },
        methods:{
            handel:function () {
                this.num1 = this.num1 +13;
            },
            handel2:function () {
                this.num2 = this.num2 +13;
            }
        }
    })
</script>

.trim：去掉开始和结尾的空格

<div id="app">
    <div>
        <input type="text" v-model="num1">
        "{{num1}}"
    </div>
    <div>
        <input type="text" v-model.trim="num2">
        "{{num2}}"
    </div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            num1:'',
            num2:'',
        }
    })
</script>

.lazy：将input事件切换为chenge事件(绑定的数据不会随时变化，会等到你的鼠标焦点离开输入框同步数据)

<input type="text" v-model.lazy="num2">

<div id="app">
    <div>
        <input type="text" v-model="num1">
        "{{num1}}"
    </div>
    <div>
        <input type="text" v-model.lazy="num2">
        "{{num2}}"
    </div>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            num1:'',
            num2:'',
        }
    })
</script>