Vue表单控件绑定

 

目录

1、应用v-model绑定文本框：

2、应用v-model绑定复选框：

3、应用v-model绑定下拉菜单：

---

在web应用中，通过表单可以实现输入文字、选择选项和提交数据等功能。在Vue.js中，通过v-model指令可以对表单元素进行数据绑定，在修改表单元素值的同时，Vue实例中对应的属性值也会随之更新

1、应用v-model绑定文本框：

<div id="element">
    <input v-model="message1" placeholder="单行文本框">
    <p>单行文本框当前输入:{{message1}}</p>
    <br>
    <textarea v-model="message2" placeholder="多行文本框"></textarea>
    <p>多行文本框当前输入:{{message2}}</p>
    <br>
    <textarea v-model="message3" placeholder="值绑定文本框"></textarea>
 </div>
 
 <script src="http://60.205.187.0/vue/vue.js"></script>
 <script type="text/javascript">
 
     var demo = new Vue({
         el: '#element',
         data: {
             message1:'',
             message2:'',
             message3:'ikun'
         }
     })
 
 </script>

2、应用v-model绑定复选框：

<div id="element">
    <p>绑定当个复选框</p>
    <input v-model="checkbox1" type="checkbox">
    <label for="checkbox1">checkbox1:{{checkbox1}}</label>
    <br>
    <p>绑定多个复选框</p>
    <input v-model="checkbox2" type="checkbox" value="基">
    <label>基</label>
    <input v-model="checkbox2" type="checkbox" value="你">
    <label>你</label>
    <input v-model="checkbox2" type="checkbox" value="太">
    <label>太</label>
    <input v-model="checkbox2" type="checkbox" value="美">
    <label>美</label>
    <p>{{checkbox2}}</p>
    <p>值绑定复选框</p>
    <input v-model="checkbox4" type="checkbox" :value="checkbox3[0]">
    <label>{{checkbox3[0]}}</label>
    <input v-model="checkbox4" type="checkbox" :value="checkbox3[1]">
    <label>{{checkbox3[1]}}</label>
    <input v-model="checkbox4" type="checkbox" :value="checkbox3[2]">
    <label>{{checkbox3[2]}}</label>
    <p>{{checkbox4}}</p>

</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    var demo = new Vue({
        el: '#element',
        data: {
            checkbox1: '',
            checkbox2: [],
            checkbox3: ['你','干','嘛~'],
            checkbox4: []
        }
    })

</script>

 

3、应用v-model绑定下拉菜单：

<div id="element">
    <p>绑定单选下拉菜单</p>
    <select v-model="type1">
        <option value="">请选择</option>
        <option>哎哟，你干嘛</option>
        <option>香翅捞饭</option>
        <option>荔枝</option>
    </select>
    <p>已选择：{{type1}}</p>

    <p>绑定多选下拉菜单</p>
    <select v-model="type2" multiple="multiple" size="4">
        <option>CTRL+单击，多选</option>
        <option>卤出鸡脚</option>
        <option>哎哟，你干嘛</option>
        <option>香翅捞饭</option>
        <option>荔枝</option>
    </select>
    <p>已选择：{{type2}}</p>

    <p>值绑定下拉菜单</p>
    <select v-model="type4" multiple="multiple" size="4">
        <option>{{type3[0]}}</option>
        <option>{{type3[1]}}</option>
        <option>{{type3[2]}}</option>
        <option>{{type3[3]}}</option>
        <option>{{type3[4]}}</option>
    </select>
    <p>已选择：{{type4}}</p>

</div>

<script src="http://60.205.187.0/vue/vue.js"></script>
<script type="text/javascript">

    var demo = new Vue({
        el: '#element',
        data: {
            type1: '',
            type2: [],
            type3: ['真','ikun','粉','纯必要','没路人'],
            type4: ''
        }
    })

</script>