前端笔记Vue项目day2(一）

 

表单基本操作

• 获取单选框中的值

  • 通过v-model

  • [AppleScript] 纯文本查看 复制代码

    ?

    01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22

    <!--         1、 两个单选框需要同时通过v-model 双向绑定 一个值         2、 每一个单选框必须要有value属性  且value 值不能一样         3、 当某一个单选框选中的时候 v-model  会将当前的 value值 改变 data 中的 数据           gender 的值就是选中的值，我们只需要实时监控他的值就可以了     -->    <input type="radio" id="male" value="1" v-model='gender'>    <label for="male">男</label>      <input type="radio" id="female" value="2" v-model='gender'>    <label for="female">女</label>   <script>     new Vue({          data: {              // 默认会让当前的 value 值为 2 的单选框选中                 gender: 2,              },     })   </script>

  • 获取复选框中的值

    • 通过v-model

    • 和获取单选框中的值一样

    • 复选框 checkbox 这种的组合时   data 中的 hobby 我们要定义成数组 否则无法实现多选

    • [AppleScript] 纯文本查看 复制代码

      ?

      01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

      <!--         1、 复选框需要同时通过v-model 双向绑定 一个值         2、 每一个复选框必须要有value属性  且value 值不能一样         3、 当某一个单选框选中的时候 v-model  会将当前的 value值 改变 data 中的 数据           hobby 的值就是选中的值，我们只需要实时监控他的值就可以了     -->   <div>    <span>爱好：</span>    <input type="checkbox" id="ball" value="1" v-model='hobby'>    <label for="ball">篮球</label>    <input type="checkbox" id="sing" value="2" v-model='hobby'>    <label for="sing">唱歌</label>    <input type="checkbox" id="code" value="3" v-model='hobby'>    <label for="code">写代码</label>  </div> <script>     new Vue({          data: {                 // 默认会让当前的 value 值为 2 和 3 的复选框选中                 hobby: ['2', '3'],             },     }) </script>

    • 获取下拉框和文本框中的值

      • 通过v-model

      • [AppleScript] 纯文本查看 复制代码

        ?

        01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

        <div>       <span>职业：</span>        <!--             1、 需要给select  通过v-model 双向绑定 一个值             2、 每一个option  必须要有value属性  且value 值不能一样             3、 当某一个option选中的时候 v-model  会将当前的 value值 改变 data 中的 数据              occupation 的值就是选中的值，我们只需要实时监控他的值就可以了         -->        <!-- multiple  多选 -->       <select v-model='occupation' multiple>           <option value="0">请选择职业...</option>           <option value="1">教师</option>           <option value="2">软件工程师</option>           <option value="3">律师</option>       </select>          <!-- textarea 是 一个双标签   不需要绑定value 属性的  -->         <textarea v-model='desc'></textarea>   </div> <script>     new Vue({          data: {                 // 默认会让当前的 value 值为 2 和 3 的下拉框选中                  occupation: ['2', '3'],                  desc: 'nihao'             },     }) </script>