(七)表单及相关数据绑定

有句话说一下，就是前边这几篇文章都是在总结相应的知识 ，很多时候可能会不知道咋写 ，没事了解就可以，跟着走下去你会发现是 这就是一个总结性的学习 不是带领你一点点一步步的学习，怎么说呢，只要你有一定的编程基础，能够了解到这些是干什么的，总结就好了，你会找到自己对vue的架构，从而实现你想去做一个网站 在使用vue的时候应该怎么去写 怎么去想

表单的数据绑定

(一)数据需要进行相应的绑定 意义就是页面显示的内容 和数据源进行实时绑定
v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理
内部处理：
在vue内部相应处理方法是有数据事件处理的

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

举例子：绑定input的输入值

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

举例子：复选框

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

举例子：单选按钮

<div>
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>

expoexport default {
  data() {
    return {
      picked: ''
    };
  }
};

举例子：下拉列表 选择框

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

expoexport default {
  data() {
    return {
     selected: ''
    };
  }
};

等等其实很多写法 咋说的 感觉我也总结不全 慢慢学 多去写 你会有一套你自己的写法的
修饰符
.lazy 在 change 事件_之后_进行同步

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">

.number 自动将用户的输入值转为数值类型

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

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

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