image.png

v-model [input/textarea checkbox radio select]

  1. <!--收集表单数据：
  2.   若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
  3.   若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
  4.   若：<input type="checkbox"/>
  5.   1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  6.   2.配置input的value属性:
  7.   (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  8.   (2)v-model的初始值是数组，那么收集的的就是value组成的数组
  9.   备注：v-model的三个修饰符：
  10.   lazy：失去焦点再收集数据
  11.   number：输入字符串转为有效的数字
  12.     trim：输入首尾空格过滤
  13. -->
  14. <body>
  15.     <div id="app">
  16.         <!-- 普通表单标签 -->
  17.         <input type="text" v-model="msg">
  18.         <hr/>
  19.         <textarea v-model="msg"></textarea>
  20.         <hr/> {{msg}}
  21.         <hr/>
  22.         <!-- 复选框 -->
  23.         <label v-for="item in fruits">
  24.             {{item}}
  25.             <input type="checkbox" name="" :value="item" v-model="checkFruits">
  26.         </label>
  27.         <h2>{{checkFruits}}</h2>
  28.         <!-- checkbox 同意协议 -->
  29.         <label>
  30.             <input type="checkbox" v-model="isAgree">同意协议
  31.         </label>
  32.         <hr/>
  33.         <!-- 单选框 -->
  34.         <label v-for="item in fruits">
  35.             {{item}}
  36.             <input type="radio" name="" :value="item" v-model="radioFruit">
  37.         </label>
  38.         <h2>{{radioFruit}}</h2>
  39.         <!-- 选项框 注意v-model的位置-->
  40.         <select v-model="chooseCity">
  41.             <option v-for="item in citys" name="item" >{{item}}</option>
  42.         </select>
  43.         <h2>{{chooseCity}}</h2>
  44.         <!-- 多选项框 -->
  45.         <select v-model="moreCity" multiple="multiple">
  46.             <option v-for="item in citys" name="item">{{item}}</option>
  47.         </select>
  48.         <h2>{{moreCity}}</h2>
  49.     </div>
  50.     <script>
  51.         let app = new Vue({
  52.             el: "#app",
  53.             data: {
  54.                 msg: 'Hellow',
  55.                 isAgree: false,
  56.                 fruits: ['A', 'B', 'C'],
  57.                 checkFruits: [],
  58.                 radioFruit: "B",
  59.                 citys: ['GZ', 'YY', 'CC'],
  60.                 chooseCity: "YY", //预设选择
  61.                 moreCity: ['GZ']
  62.             }
  63.         })
  64.     </script>
  65. </body>

完整表单收集数据

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <title>收集表单数据</title>
  6.         <script type="text/javascript" src="../js/vue.js"></script>
  7.     </head>
  8.     <body>
  9.         <!-- 
  10.             收集表单数据：
  11.             若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
  12.             若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
  13.             若：<input type="checkbox"/>
  14.                 1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  15.                 2.配置input的value属性:
  16.                     (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  17.                     (2)v-model的初始值是数组，那么收集的的就是value组成的数组
  18.             备注：v-model的三个修饰符：
  19.                 lazy：失去焦点再收集数据
  20.                 number：输入字符串转为有效的数字
  21.                 trim：输入首尾空格过滤
  22.         -->
  23.         <!-- 准备好一个容器-->
  24.         <div id="root">
  25.             <form @submit.prevent="demo">
  26.                 账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
  27.                 密码：<input type="password" v-model="userInfo.password"> <br/><br/>
  28.                 年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
  29.                 性别：
  30.                 男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
  31.                 女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
  32.                 爱好：
  33.                 学习<input type="checkbox" v-model="userInfo.hobby" value="study">
  34.                 打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
  35.                 吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
  36.                 <br/><br/>
  37.                 所属校区
  38.                 <select v-model="userInfo.city">
  39.                     <option value="">请选择校区</option>
  40.                     <option value="beijing">北京</option>
  41.                     <option value="shanghai">上海</option>
  42.                     <option value="shenzhen">深圳</option>
  43.                     <option value="wuhan">武汉</option>
  44.                 </select>
  45.                 <br/><br/>
  46.                 其他信息：
  47.                 <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
  48.                 <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
  49.                 <button>提交</button>
  50.             </form>
  51.         </div>
  52.     </body>
  54.     <script type="text/javascript">
  55.         Vue.config.productionTip = false
  57.         new Vue({
  58.             el:'#root',
  59.             data:{
  60.                 userInfo:{
  61.                     account:'',
  62.                     password:'',
  63.                     age:18,
  64.                     sex:'female',
  65.                     hobby:[],
  66.                     city:'beijing',
  67.                     other:'',
  68.                     agree:''
  69.                 }
  70.             },
  71.             methods: {
  72.                 demo(){
  73.                     console.log(JSON.stringify(this.userInfo))
  74.                 }
  75.             }
  76.         })
  77.     </script>
  78. </html>