当前位置 博文首页 > 文章内容

    vue之v-model表单绑定

    作者:李东平|一线码农 栏目:未分类 时间:2020-10-17 18:00:27

    1.背景

    2.简单使用

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <!-- 开发环境版本,包含了有帮助的命令行警告 -->
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <!--<script src="./js/vue.js"></script>-->
    </head>
    <body>
    <div id="app">
      <h3>{{title}}</h3>
      请输入你的姓名:<input v-model="name">
      <br>
      你输入的名称为:{{name}}
    
    </div>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          title: 'v-model之双向绑定',
          name: 'ldp',
          number: 60
        }
      });
    </script>
    </body>
    </html>
    View Code

    3.双向绑定原理

    <!DOCTYPE html>
    <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <!-- 开发环境版本,包含了有帮助的命令行警告 -->
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <!--<script src="./js/vue.js"></script>-->
    </head>
    <body>
    <div id="app">
      <h3>{{title}}</h3>
      <pre>
        原理:
        原理很简单,
        第一步:使用v-bind给value元素赋值,
        第二步:使用v-on:input监听input输入的变化
      </pre>
      <h4>v-model实现双向绑定</h4>
      请输入你的姓名:<input v-model="name">
      <br>
      你输入的名称为:{{name}}
      <hr>
      <h4>自己写代码实现双向绑定(v-bind与v-on配合使用就可以了)</h4>
      请输入你的姓名:<input v-bind:value="name2" v-on:input="name2=$event.target.value">
      <br>
      你输入的名称为:{{name2}}
    
    </div>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          title: 'v-model之原理',
          name: 'ldp',
          name2: 'ldp2',
          number: 60
        }
      });
    </script>
    </body>
    </html>
    View Code

    4.单选框

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <!-- 开发环境版本,包含了有帮助的命令行警告 -->
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <!--<script src="./js/vue.js"></script>-->
    </head>
    <body>
    <div id="app">
      <h3>{{title}}</h3>
      请输入你的性别:
      <label for="male">
        <input id="male" type="radio" v-model="gender" value="1"></label>
    
      <label for="female">
        <input id="female" type="radio" v-model="gender" value="2"></label>
    
      <label for="other">
        <input id="other" type="radio" v-model="gender" value="3"> 其他
      </label>
    
      <br>
      你输入的性别为:{{gender}}
    
    </div>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          title: 'v-model之radio单选框实现',
          name: 'ldp',
          gender: '',
          number: 60
        }
      });
    </script>
    </body>
    </html>
    View Code

    5.复选框

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <!-- 开发环境版本,包含了有帮助的命令行警告 -->
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <!--<script src="./js/vue.js"></script>-->
    </head>
    <body>
    <div id="app">
      <h3>{{title}}</h3>
      请选择你喜欢的开发语言:
      <label for="java">
        <input id="java" type="checkbox" v-model="language" value="1"> java
      </label>
    
      <label for="c">
        <input id="c" type="checkbox" v-model="language" value="2"> c
      </label>
    
      <label for="c++">
        <input id="c++" type="checkbox" v-model="language" value="3"> c++
      </label>
    
      <label for="c#">
        <input id="c#" type="checkbox" v-model="language" value="4"> c#
      </label>
      <br>
      你输入的性别为:{{language}}
      <hr>
      <label for="check">
        <input id="check" type="checkbox" v-model="checked"> 请勾选协议
      </label>
      <br>
      你是否勾选了勒:{{checked}}
    
    </div>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          title: 'v-model之checkbox复选框实现',
          name: 'ldp',
          language: [],
          checked: false,
          number: 60
        }
      });
    </script>
    </body>
    </html>
    View Code

    6.下拉框

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <!-- 开发环境版本,包含了有帮助的命令行警告 -->
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <!--<script src="./js/vue.js"></script>-->
    </head>
    <body>
    <div id="app">
      <h3>{{title}}</h3>
      请选择你出生的月份:
      <select v-model="month">
        <option value="1">1月</option>
        <option value="2">2月</option>
        <option value="3">3月</option>
        <option value="4">4月</option>
        <option value="5">5月</option>
        <option value="6">6月</option>
        <option value="7">7月</option>
        <option value="8">8月</option>
        <option value="9">9月</option>
        <option value="10">10月</option>
        <option value="11">11月</option>
        <option value="12">12月</option>
      </select>
      <br>
      你选择的月份是:{{month}}
      <hr>
      请选择你去过的城市:
      <select v-model="city" multiple>
        <option value="1">成都</option>
        <option value="2">北京</option>
        <option value="3">上海</option>
        <option value="4">广州</option>
      </select>
      <br>
      你选择的月份是:{{city}}
    
    
    </div>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          title: 'v-model之select下拉框选择',
          month: '',
          city: [],
          name: 'ldp',
          language: [],
          checked: false,
          number: 60
        }
      });
    </script>
    </body>
    </html>
    View Code

    7.修饰符

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <!-- 开发环境版本,包含了有帮助的命令行警告 -->
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <!--<script src="./js/vue.js"></script>-->
    </head>
    <body>
    <div id="app">
      <h3>{{title}}</h3>
      请输入你的名字:
      <input v-model.lazy="name">
      <br>
      v-model.lazy失去焦点后在显示:{{name}}
      <hr>
      请输入你的年龄:
      <input type="number" v-model.number="age">
      <br>
      v-model.number只能输入数字:{{age}}
      <hr>
      请输入你的家庭地址:
      <input v-model.trim="address">
      <br>
      v-model.trim会去掉首尾空格:{{address}}
    
    </div>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          title: 'v-model之select下拉框选择',
          name: '',
          age: null,
          address: ''
        }
      });
    </script>
    </body>
    </html>
    View Code

     完美!