用表单处理用户输入

Posted 2022-04-10 lyplucky

FORMS

input

v-model

双向绑定，响应每个 input事件

v-model.lazy

修改响应时机

监听 change事件，只在点击其他地方离开输入框的时候才被触发，用lazy修饰符避免实时更新

v-model.number

强制将用户的输入值转为数值类型

v-model.trim

自动过滤用户输入的首尾空白字符

textarea

在文本区域插值 (<textarea>text</textarea>) 并不会生效，应用 v-model 来代替。

虽然其中有开始标签和结束标签，但其中不能填写预设值

多行文本的输出要保留换行的样式

<p style="white-space: pre">message </p>

checkbox

使用复选框并将数据保存在数组中,v-model

radio

v-model将数据value保存在数组中

select

<select
          id="priority"
          class="form-control"
          v-model="selectedPriority">
       <option
          v-for="priority in priorities"
          :selected="priority == 'Medium'">
          priority
        </option>

</select>

没有使用 v-model设置默认值时，才可设置 selected属性

v-model原理

//方式一
v-model=“data”
//方式二
：value ="data"
@input = "data = $event.target.value"