《前端》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>