表单基本操作

• 获取单选框中的值
  • 通过v-model
  • [AppleScript] 纯文本查看 复制代码

    <!-- 
    		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] 纯文本查看 复制代码

      <!-- 
      		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] 纯文本查看 复制代码

        <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>

        
        
      
      
    
    
  
  

表单基本操作

• 获取单选框中的值
  • 通过v-model
  • [AppleScript] 纯文本查看 复制代码

    <!-- 
    		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] 纯文本查看 复制代码

      <!-- 
      		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] 纯文本查看 复制代码

        <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>