vue表单

vue中表单主要通过v-model实现数据的双向绑定，实现原理主要通过javascript的object.defineproperty方法。v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。

一、input

1.1 一般的数据绑定，数据填充表单才会更新视图

<div id="root">
    <input type="text" v-model="message" placeholder="请输入">
    <p>输入的内容是： {{message}}</p>
</div>

new Vue({
    el: "#root",
    data: {
        message: ''
    }
})

1.2 @input事件，同步输入法的输入，此时输入法输入什么，视图更新什么

<div id="root">
    <input type="text" @input="handleInput" placeholder="请输入">
    <p>输入的内容是： {{message}}</p>
</div>

new Vue({
    el: "#root",
    data: {
        message: ''
    },
    methods: {
        handleInput: function(e){
            this.message = e.target.value;
        }
    }
})

二、radio

2.1 单个radio使用，只需要通过v-bind绑定checked属性值

<div id="root">
    <label>单个单选</label>
    <input type="radio" :checked="picked">
    <p>目前状态是： {{picked}}</p>
</div>

new Vue({
    el: "#root",
    data: {
        picked: true
    }
})

2.2 多个radio组合使用，需要借助v-model绑定相同的数据，当数据值和radio的value值相同，才会被选中

<div id="root">
    <label for="html">HTML</label>
    <input type="radio" v-model="picked1" value="html" id="html">
    <label for="js">javascript</label>
    <input type="radio" v-model="picked1" value="js" id="js">
    <label for="css">css</label>
    <input type="radio" v-model="picked1" value="css" id="css">
    <p>输入的内容是： {{picked1}}</p>
</div>

new Vue({
    el: "#root",
    data: {
         picked1: "js"
    }
})

三、checkbox

checkbox和radio也是分单个和组合使用，不同的是单个使用需要v-model绑定一个布尔值，多个使用绑定的是一个数组

3.1 单个checkbox使用，需要通过v-model绑定checked值

<div id="root">
    <label>单个复选</label>
    <input type="checkbox" v-model="checked">
    <p>目前状态是： {{checked}}</p>
</div>

new Vue({
    el: "#root",
    data: {
        checked: true
    }
})

3.2 多个checkbox组合使用，需要使用v-model绑定相同的数据，该数据为一个数组，当数组的值和checkbox的value值相同，才会被选中

<div id="root">
    <label for="html">HTML</label>
    <input type="checkbox" v-model="checked1" value="html" id="html">
    <label for="js">javascript</label>
    <input type="checkbox" v-model="checked1" value="js" id="js">
    <label for="css">css</label>
    <input type="checkbox" v-model="checked1" value="css" id="css">
    <p>输入的内容是： {{checked1}}</p>
</div>

new Vue({
    el: "#root",
    data: {
        checked1: ['js','css']
    }
})

四、selected

selected也分单个选择和多项选择。

4.1 单个选择selected使用，需要通过v-model绑定selected值

<div id="root">
    <label>单个选择</label>
    <select v-model="selected">
        <option value="html">HTML</option>
        <option value="js">JS</option>
        <option value="css">CSS</option>
    </select>
    <p>目前状态是： {{selected}}</p>
</div>

 new Vue({
    el: "#root",
    data: {
        selected: 'css',
    }
})

4.2 多项选择selected使用，需要通过v-model绑定selected值，值为一个数组，当数组的值和selected的值匹配时，才会被选择

<div id="root">
    <label>多个选择</label>
    <select v-model="selected1" multiple>
        <option value="html">HTML</option>
        <option value="js">JS</option>
        <option value="css">CSS</option>
        <option value="vue">VUE</option>
    </select>
    <p>目前状态是： {{selected1}}</p>
</div>

 new Vue({
    el: "#root",
    data: {
        selected1: ['js','vue']
    }
})

详见官方文档。