123. Python语言 的 项目前导(下) 之 Vue 第四章 ：Vue 的 表单输入绑定

本章主题

关键词

表单输入绑定

  v-model 指定可以实现 表单值 与 属性 的 双向绑定。即表单元素中更改了值，相对应的属性中的值也会随之 自动的更新；属性中的值更新了，相对应的表单中的值也会随之 自动的更新。

  绑定的属性和事件：
    v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

    1. text 和 textarea 元素使用 value 属性 和 input 事件。
    2. checkbox 和 radio 使用 checked 属性和 change 事件。
    3. select 字段将 value 作为 prop 并将 change 作为事件。

表单元素绑定

   input 绑定

# v-model是v-model:value的缩写,改变 input标签中的值 可以改变下面的属性

<input v-model="message" placeholder="请输入...">
<input v-model:value="message" placeholder="请输入...">
<p>输入的内容是：{{ message }}</p>


new Vue({
  el: '#example-3',
  data: {
    message: ""
  }
})

   textarea 绑定

<span>输入的内容是：</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="请输入多行内容..."></textarea>

   checkbox 绑定

<div id='example-3'>
  <input type="checkbox"  value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox"  value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox"  value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

   radio 绑定

<div id="example-4">
    <input type="radio" value="男" v-model="gender">
    <label>男</label>
    <br>
    <input type="radio" value="女" v-model="gender">
    <label>女</label>
    <br>
    <span>Picked: {{ gender }}</span>
</div>
new Vue({
  el: '#example-4',
  data: {
    gender: ''
  }
})

   select 绑定

<div id="example-5">
    <select v-model="selected">
        <option disabled value="">请选择</option>
        # 如果有value值 选择的就是value值
        <option value="1">A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>
new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

修饰符

  .lazy ：
  在默认情况下，v-model 在每次 input事件 触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在"change"时而非"input"时更新 光标移除input输入框的时候 -->
<input type="text" v-model:value.lazy="message">
<input v-model.lazy="message" >

new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

   .number ：
  如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

  这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回 字符串。如果这个值无法被 parseFloat() 解析，则会返回 原始的值。

   .trim ：
  如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

总结小便条

本篇文章主要讲了以下几点内容：

  本章回顾暂时就到这了，如果还有点晕，那就把文章里所有引用的案例代码再敲几遍吧。拜拜~