表单、props

一、表单数据

主要是通过v-model双向绑定输入的数据

1 input,textarea,select v-model默认触发的是input事件

trim修饰符可以去掉内容的前后空格

number修饰符可以把输入值转为number,如果不能转为number还是string(input输入的内容默认是字符串)

lazy会在表单元素失去焦点或按下回车键时才更新绑定的数据，而不是在每次输入时都立即更新。没有特殊需求一般不加lazy修饰符

<p>姓名:<input type="text" v-model.trim.number="name"></p>
<p>年龄:<input type="number" v-model.lazy="age"></p>
<p>{
   {
   age}}</p>
<p>简介:<textarea v-model="introduction"></textarea></p>

2 v-model 绑定radio单选按钮的value值。可以设置默认选项

<p>性别:
    <input v-model="sex" name="sex" type="radio" value="man">男 
    <input v-model="sex" name="sex" type="radio" value="woman">女
</p>
data(){
   
    return {
   
        sex:"woman", // 设置单选按钮默认值为wuman
    }
}

3 v-model 绑定checkbox多选框。选中的是value值，放入的是一个数组

<p>
    爱好
    <input v-model="likes" type="checkbox" name="like" value="book">看书
    <input v-model="likes" type="checkbox" name="like" value="movie">电影
    <input v-model="likes" type="checkbox" name="like" value="run">跑步
    <input v-model="likes" type="checkbox" name="like" value="swim">游泳
</p>

data(){
   
	raturn {
   
    likes:["movie","run"], // 可以设置默认选中项
}
  }

4 v-model 绑定select下拉列表。 单选是一个字符串，多选则是数组,绑定的是value值

<p>
    城市:
    <select v-model="city" >
        <option value="default"