Vue 表单数据

怼烎@ 2024-04-18 23:57 90阅读 0赞

### 文章目录 ###

*  vue数据绑定
 *   *  绑定input 和 textarea
     *  复选框绑定
     *  单选框
     *  绑定 select
     *  v-model 中的修饰符

# vue数据绑定 #

## 绑定input 和 textarea ##

1 可以通过v-model绑定input的输入值，当input的输入值发生变化的时候，intputMessage也会同步发生变化
        <input type="text" v-model="intputMessage">
        <p>{
       {intputMessage}}</p>
        <br>
        
        2  可以通过v-model绑定textarea的输入值，当textarea的输入值发生变化的时候，textareaMessage也会同步发生变化 -- 
        <textarea v-model="textareaMessage"></textarea>
        <p>{
       {textareaMessage}}</p>
        <br>

如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70]

## 复选框绑定 ##

*  当我们使用v-model绑定多选框的时候，如果我们的声明值（checkedMessage）为数组的话，那么v-model会绑定多选框的value值，  
    当多选框的checked为true的时候，则会把对应的value添加到数组中。如果我们的声明值为字符串的话，那么v-model会绑定多选框的checked值，  
    当多选框的checked为true的时候，则所有多选框的绑定值也变为true

<div>
            <input type="checkbox" id="android" value="android" v-model="checkedMessage">
            <label for="android">android</label>
            <input type="checkbox" id="ios" value="ios" v-model="checkedMessage">
            <label for="ios">ios</label>
            <input type="checkbox" id="javaScript" value="javaScript" v-model="checkedMessage">
            <label for="javaScript">javaScript</label>
            <br>
            <p>checked  message: {
       { checkedMessage }}</p>
        </div>

![在这里插入图片描述][20190914180044625.png]

如果 复选框初始化为 字符串

checkedMessage: ['android'],

![在这里插入图片描述][20190914180219938.png]

## 单选框 ##

4  当我们使用v-model去绑定单选框的时候，v-model会自动绑定单选框的value值，当单选框的checked变为true的时候，对应的绑定值会变为该单选框的vlaue
        <div>
            <input type="radio" id="javaScrips" value="javaScript" name="testRadio" v-model="radioMessage">
            <label for="javaScript">javaScript</label>
            <br>
            <input type="radio" id="Vue" value="Vue" name="testRadio" v-model="radioMessage">
            <label for="Vue">Vue</label>
            <br>
            <p>radio message: {
       { radioMessage }}</p>
        </div>

如图  
![在这里插入图片描述][20190914180332699.png]

![在这里插入图片描述][2019091418034739.png]

## 绑定 select ##

5  当我们使用v-model去绑定select的时候，如果select为多选的，那么我们的绑定值（selectedMessage），为数组类型。
        如果select为单选的，那么我们的绑定值（selectedMessage）为字符串类型
        <select v-model="selectedMessage" multiple style="width: 100px;">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>

如图  
![在这里插入图片描述][20190914180458629.png]

![在这里插入图片描述][20190914180511431.png]

## v-model 中的修饰符 ##

**1 .lazy修饰符作用为：改变数据同步时机。当执行 change 事件时进行数据同步**  
**2 .number修饰符作用为：同步数据将输入的值改变为number类型**  
**3 .trim修饰符作用为：同步数据去掉输入值前后的空格**

<input v-model.lazy="testlazy" >
            <p>{
       {testlazy}}</p>
            <br>
            
            <input v-model.number="testnumber" type="number">
            <p>{
       {testnumber}}</p>
            <br>
          
            
            <input v-model.trim="testTrim">
            <p>{
       {testTrim}}</p>

var app = new Vue({ 
            el: '#app',
            data: { 
                intputMessage: '这是我们默认的input信息',
                textareaMessage: '这是我们默认的textarea信息',
                checkedMessage: [],
                radioMessage: '',
                selectedMessage: [],
                testlazy: '',
                testnumber: '',
                testTrim: ''
            }
        });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODM2MTM0Nw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d51d52e4254243c8b4eee5e2720878b4.png
[20190914180044625.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/c8af33aa988b43d494d705f3ead2188f.png
[20190914180219938.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b3a97e2507f44e199ee427bd48f9c2bf.png
[20190914180332699.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4ee9bec0cfbe43f58e1d0f74892df37f.png
[2019091418034739.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/fd9907fd9e004f018fee0148da6ec43c.png
[20190914180458629.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/54b27f35252842e0a09a86855f7c5269.png
[20190914180511431.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/5e445b7e077c48b1a7994baadad771a4.png