本文已参与「新人创作礼」活动，一起开启掘金创作之路

输入框

Text

<input/> 输入框，type ="text" , 数据用 v-model 绑定

<template>
  <h1> msg => {{ msg }}</h1>
  <input type="text" v-model="msg">
</template>

Textarea

<textarea/> 多行文本输入框 , 数据用 v-model绑定，placeholder输入默认值

<template>
  <textarea v-model="msg" placeholder="请输入文本"></textarea>
  <p> msg => {{msg}}</p>
</template>

选择框

Checkbox

单个Checkbox

<input/> 输入框，type ="checkbox" , 数据用 v-model 绑定布尔值。

<label/> 是跟在checkbox的文字，可以用 for="" 绑定到<input/>的id。id需全局唯一

<template>
  <input id="check" type="checkbox" v-model="checked"/>
  <label for="check"> -> isChecked? {{checked}} </label>
</template>

多值复选框

<input/> type ="checkbox" 输入框包装在一个<label>中表示一个选项。每一个选项用v-model绑定同一个数组，每一个 <input/> 赋值 value ="" 选中后会在绑定的数组中显示

<template>
  <label for="tag1">
    <input id="tag1"  type="checkbox" value="编剧" v-model="tags">
    编剧
  </label>
  <label for="tag2">
    <input id="tag2" type="checkbox" value="导演" v-model="tags">
    导演
  </label>
  <label for="tag3">
    <input id="tag3" type="checkbox" value="演员" v-model="tags">
    演员
  </label>
  <p>{{tags}}</p>
</template>

Radio（单选）

<input/> type ="radio" 输入框包装在一个<label>中表示一个选项。每一个选项用v-model绑定至同一个数据，每一个 <input/> 赋值 value ="" 选中后会在绑定的数据中显示。自动实现单选

<template>
  <label>
    <input type="radio" value="年" v-model="type">
    年
  </label>
   <label>
    <input type="radio" value="月" v-model="type">
    月
  </label>
  <p>订阅周期：{{type}}</p>
</template>

选择列表(Select)

<select /> 绑定 v-model ,每一个选项用 <option> 包装。 <option> 里面的值是显示出来的值，value ="" 是选中后传给 v-model绑定的值

<template>
  <select v-model="category">
    <option v-for="name in type" :key="name" value="name"> {{name}}</option>
  </select>
  <p>
    {{category}}
  </p>
</template>

事件

input：元素值变化时发生的事件

<input/> 输入框，type ="text" , 用 @input 绑定输入事件后的函数，会默认传一个参数 event

event参数中，event.data是输入的值，event.target.value是输入框中所有的值

<script >
 export default {
   data(){
     return{
       newData:""
     }
   },
   methods:{
      inputEvent(event){
        console.log(event)
        console.log(event.data)
        console.log(event.target.value)
      }
   }
 }
</script>

<template>
  <input type="text" @input="inputEvent"/>
</template>

change：用户提交修改元素值时发生的事件

<input/> 输入框，type ="text" , 用 @change 绑定输入事件后的函数，会默认传一个参数 event ，

触发条件：1-输入结束后（按回车或空白区）才会触发函数；2-内容改变时才会激发函数

event参数中，event.target.value是输入框中所有的值

<script >
 export default {
     data(){
       return{
         newData:""
       }
     },
     methods:{
        changeEvent(event){
          console.log(event)
          console.log(event.target.value)
        }
   }
 }

</script>

<template>
  <input type="text" @change="changeEvent"/>
</template>

keyup：按下并抬起键盘按键时发生的事件

<input/> 输入框，type ="text" , 用 @keyup 绑定输入事件后的函数，会默认传一个参数 event ，

触发条件：监控每一个按键

event参数中，event.key是按键输入的内容、event.code 是按键的名字

<script >
 export default {
     data(){
       return{
         newData:""
       }
     },
     methods:{
        makeIt(event){
          console.log(event.key)
          console.log(event.code)
        }
   }
 }

</script>

<template>
  <input type="text" @keyup="makeIt"/>
</template>

快捷方式：@keyup.enter 只监听 enter按键的事件

v-model

原理

v-model是双向绑定，即输入框内的内容变了会更新绑定的data，data通过其他方式变了，也会更新输入框内的内容

<input type="text" :value="newData" @input="newData = $event.target.value" /> value绑定到data，通过@input 更新每次输入的值是跟 v-model是等值的

修饰符

.lazy

为v-model绑定 .lazy修饰符，只会在按回车或空白区域后才更新输入框的值

<template>
  <input type="text" v-model.lazy="newData" />
  {{newData}}
</template>

.number

在input中选择type="text" 后，里面输入的数字也会自动转换为字符串类型。

如只需number类型，可为v-model绑定 .number修饰符

<template>
  <input type="text" v-model.number="newData" />
  {{typeof(newData)}} ->
  {{newData}}
</template>

.trim

如需清除输入中的空格，使用 .trim 修饰符可清除 v-model绑定数据中的空格

<template>
  <input type="text" v-model.trim="newData" />
  {{typeof(newData)}} ->
  {{newData}}
</template>

Vue入门 - 表单元素

输入框