VUE表单demo v-model双向绑定

<div id="app">
    <textarea v-model = "message" placeholer = '请在此输入文字'></textarea>
    <span>{{message}}</span>
     </br>
    <input type="text" v-model="data.name"/>
    <span>姓名：{{data.name}}</span>
    </br>
    <input type="radio" id="boy" value="男" v-model="data.gender"/>
    <label for="boy">男</label>
    <input type="radio" id="girl" value="女" v-model="data.gender"/>
    <lable for="girl">女</lable>
    <span>{{data.gender}}</span>
    <br/>
    <input type="checkbox" id="item1" value="阅读" v-model="data.interest"/>
    <lable for="item1">阅读</lable>
    <input type="checkbox" id="item2" value="打球" v-model="data.interest"/>
    <lable for="item2">打球</lable>
    <input type="checkbox" id="item3" value="体操" v-model="data.interest"/>
    <lable for="checkbox">体操</lable>
    <br/>
    <span>{{data.interest}}</span>
    <select v-model="data.identity">
        <option value="java" selected>java</option>
        <option value="web">web</option>
        <option value="hr">hr</option>
    </select>
    <span>身份：{{data.identity}}</span>

    <!--select：用 v-for 渲染的动态选项：-->
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
            {{ option.text }}
        </option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: '6',
            data: {
                name: '',
                gender: '',
                interest: [],
                identity: ''
            },
            selected: 'A',
            options: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
            ]
        }
    })
</script>