【Vue3 从入门到实战进阶式掌握完整知识体系】009-Vue语法基础：表单中双向绑定指令的使用

r囧r小猫 2023-10-03 08:58 7阅读 0赞

### 文章目录 ###

*   *  9、表单中双向绑定指令的使用
     *   *  input双向绑定写法
         *  运行结果
         *  textarea双向绑定写法
         *  运行结果
         *  checkbox单选写法
         *  运行结果
         *  checkbox多选写法
         *  运行结果
         *  radio单选写法
         *  运行结果
         *  select单选写法
         *  运行结果
         *  select多选写法
         *  运行结果
         *  使用v-for改写select多选写法
         *  运行结果
         *  自定义checkbox选择显示内容
         *  运行结果
         *  懒加载修饰符lazy
         *  运行结果
         *  数字修饰符number
         *  运行结果
         *  去前后空格修饰符trim
         *  运行结果

## 9、表单中双向绑定指令的使用 ##

### input双向绑定写法 ###

> 双向绑定：你变我也变，我变你也变，时时刻刻一起变！

### 运行结果 ###

![image-20210613092121068.png][]

### textarea双向绑定写法 ###

### 运行结果 ###

![image-20210613092717959.png][]

### checkbox单选写法 ###

### 运行结果 ###

![image-20210613093113304.png][]

### checkbox多选写法 ###

### 运行结果 ###

![image-20210613093453271.png][]

### radio单选写法 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data() {
         
          return {
         
            message: '未勾选任何大哥'
          }
        },
        template: `
            <div>
              {
          { message }}
              <br/>
              大哥刘备<input type="radio" v-model="message" value="大哥刘备" /><br/>
              二哥关羽<input type="radio" v-model="message" value="二哥关羽" /><br/>
              三哥张飞<input type="radio" v-model="message" value="三哥张飞" /><br/>
              四哥赵云<input type="radio" v-model="message" value="四哥赵云" /><br/>
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613093731017.png][]

### select单选写法 ###

### 运行结果 ###

![image-20210613094141322.png][]

### select多选写法 ###

### 运行结果 ###

![image-20210613094448026.png][]

### 使用v-for改写select多选写法 ###

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>hello vue</title>
      
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    
    <body>
      <div id="root"></div>
    </body>
    
    <script>
      const app = Vue.createApp({
         
        data() {
         
          return {
         
            message: [],
            options: ["大哥刘备","二哥关羽","三哥张飞","四哥赵云"],
            // 对象数据写法，value 里面可以存储任意的内容
            options2: [{
         
              text: '大哥刘备', value: '大哥刘备'
            },{
         
              text: '二哥关羽', value: '二哥关羽'
            },{
         
              text: '三哥张飞', value: '三哥张飞'
            },{
         
              text: '四哥赵云', value: '四哥赵云'
            }]
          }
        },
        template: `
            <div>
              {
          { message }}
              <br/>
              <select v-model="message" multiple>
                <option v-for="item in options">{
          {item}}</option>
              </select>
              
              <select v-model="message" multiple>
                <option v-for="item in options2" :value="item.value">{
          {item.text}}</option>
              </select>
            </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    
    </html>

### 运行结果 ###

![image-20210613095415156.png][]

### 自定义checkbox选择显示内容 ###

### 运行结果 ###

![image-20210613100042391.png][]

### 懒加载修饰符lazy ###

> 输入框失去焦点时绑定生效

### 运行结果 ###

![image-20210613100356913.png][]

### 数字修饰符number ###

> 将输入框里面的内容转换为number再存入绑定的属性中

### 运行结果 ###

![image-20210613100810478.png][]

### 去前后空格修饰符trim ###

### 运行结果 ###

![image-20210613101009905.png][]

[image-20210613092121068.png]: https://img-blog.csdnimg.cn/img_convert/1e1cde6d9bbbe91ae6c4ce4ba2048aff.png
[image-20210613092717959.png]: https://img-blog.csdnimg.cn/img_convert/3fd114464ecc84fc98eec02730c5d4b1.png
[image-20210613093113304.png]: https://img-blog.csdnimg.cn/img_convert/3d9f41fc94cce9a24e85abcb0a865b4d.png
[image-20210613093453271.png]: https://img-blog.csdnimg.cn/img_convert/dd5a3da3825b0c919dd6d31aa12801be.png
[image-20210613093731017.png]: https://img-blog.csdnimg.cn/img_convert/425a570e201cc4fccb8757cfd6f9260e.png
[image-20210613094141322.png]: https://img-blog.csdnimg.cn/img_convert/a5845a510d11e5cd26e4fc026c0c0117.png
[image-20210613094448026.png]: https://img-blog.csdnimg.cn/img_convert/1142dddc70e4d5eddf4fe9381c9921b3.png
[image-20210613095415156.png]: https://img-blog.csdnimg.cn/img_convert/57cae71c02f9d78a834459640c7a9ace.png
[image-20210613100042391.png]: https://img-blog.csdnimg.cn/img_convert/fb2104f66f1b758a5d7201618b218dd1.png
[image-20210613100356913.png]: https://img-blog.csdnimg.cn/img_convert/95452d4ca896a962e69fcac3f7b3fd0f.png
[image-20210613100810478.png]: https://img-blog.csdnimg.cn/img_convert/acc6050f33444c15f7ce6eaa12872962.png
[image-20210613101009905.png]: https://img-blog.csdnimg.cn/img_convert/10dfab140c9e949eadc4988a254c07b9.png