vue3.0--表单输入绑定

一、文本框绑值(Text)

• 使用v-model

       <input placeholder="请输入..." v-model="message">
       <p>message is:{{message}}</p>

		data() {
       	return {
           	message:''
           }
       }

二、多行文本 (textarea)

• 在文本区域插值不起作用，应该使用 v-model。

       <span>message is:</span>
       <p style="white-space: pre-line;">{{message}}</p>
       <br/>
       <textarea v-model="message" placeholder="请输入..."></textarea>

三、复选框 (Checkbox)

1.单个复选框，绑定到布尔值

       <input type="checkbox" v-model="checked"/>
       <label for="checkbox">{{ checked }}</label>

2.多个复选框，绑定到同一个数组

       <label for="hobby">爱好：</label>
       <input type="checkbox" value="篮球" v-model="hobby">篮球
       <input type="checkbox" value="足球" v-model="hobby">足球
       <input type="checkbox" value="羽毛球" v-model="hobby">羽毛球
       <input type="checkbox" value="乒乓球" v-model="hobby">乒乓球
 
   	   data() {
       	  return {
           	 hobby:[]
       	  }
   	   }

四、单选框 (Radio)

       <input type="radio" value="男" name="usersex" v-model="sex" checked>男
       <input type="radio" value="女" v-model="sex">女
       <span>性别：{{sex}}</span>
       
   	   data() {
       	  return {
           	 sex:"男"
       	  }
   	   }

五、选择框 (Select)

1.单选时

       <select v-model="selected">
           <option disabled value="">请选择</option>
           <option>A</option>
           <option>B</option>
           <option>C</option>
       </select>
       <span>Selected: {{ selected }}</span>

2.多选时 (绑定到一个数组)

       <select v-model="selected" multiple>
           <option disabled value="">请选择</option>
           <option>A</option>
           <option>B</option>
           <option>C</option>
       </select>
       <span>Selected: {{ selected }}</span>

3.用 v-for 渲染的动态选项

       <select v-model="selected">
           <option v-for="option in options" :key="option" :value="option.value">
           {{ option.text}}
           </option>
       </select>
       <span>Selected: {{selected}}</span>
		        
   	   data() {
       	  return {
           	 selected:'',
           	 options: [
               	 { text: '1', value: '小赵' },
               	 { text: '2', value: '小李' },
           	 ]
       	  }
   	   }

五、值绑定

• 对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)

1.复选框 (Checkbox)值绑定

	<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />

	toggle:"yes"

2.单选框 (Radio)值绑定

	<input type="radio" v-model="checked" value="true">同意以上条款

	checked:true

3.选择框 (Select)值绑定

	<select v-model="selected">
		<option :value="{ number: 123 }">123</option>
    </select>

六、三级联动

	<li>
		省：
		<select v-model="address.s1">
       	<option selected>-请选择-</option>
       	<option value="山西省">-山西省-</option>
           <option value="陕西省">-陕西省-</option>
       </select>
       市：
       <select v-model="address.s2">
           <option selected>-请选择-</option>
           <option value="咸阳市">-咸阳市-</option>
           <option value="西安市">-西安市-</option>
       </select>
       区：
       <select v-model="address.s3">
           <option selected>-请选择-</option>
           <option value="长安区">-长安区-</option>
           <option value="雁塔区">-雁塔区-</option>
       </select>
	</li>
	data() {
       return {
           address:{
               s1:'-请选择-',
               s2:'-请选择-',
               s3:'-请选择-'
           },
        }
	}