Vue——表单元素demo & watch 例子

目录

㋀㏫ ㍩

✎ input 元素

◆ v-model 修饰符

❶ lazy

❷ number

◆ v-model 和 v-bind 区别

✎ 单选框和多选框

❶ radio和checkbox

✎ 下拉框

❶ select 

❷  select 和 v-for

✎ watch

◆ 前言

❶ 练习（利用监听v-model绑定的myValue，并且执行tellUser方法）

❷ 练习（点击change按钮，将列表数据改成｛name：pinaapple，price：256｝，然后同时要调用通知用户接口弹框）

► 总结

✎  遇到的问题

✎  资源附件

---

✎ input 元素

<input type="text" v-model="myValue">
{
  {myValue}}

◆ v-model 修饰符

❶ lazy

input.lazy:当输入的时候完成输入/enter/失去焦点，才会更新值

<input type="text" v-model.lazy="myValue">
{
  {myValue}}

❷ number

input.number:输入的值强制转换成数字
		
<input type="text" v-model.number="myValue">
{
  {typeof myValue}}

◆ v-model 和 v-bind 区别

两者都可以绑定数据，但是修饰符不同，要求不同，v-model可以lazy、number，但是数据必须变量生命和初始化，v-bind则不用。

✎ 单选框和多选框

❶ radio和checkbox

<!-- 多选框：checkbox，单选框：checkbox -->
<input type="checkbox" v-model="myBox" value="apple">apple
<input type="checkbox" v-model="myBox" value="banana">banana
<input type="checkbox" v-model="myBox" value="pinaapple">pinaapple
{
  {myBox}}

✎ 下拉框

❶ select 

<select v-model="selection">
	<option value="1">1</option>
	<option value="2">2</option>
</select>

❷  select 和 v-for

下拉框和v-for作用可以抽象出一个vSelect组件<vSelect @onSelct="" :list="selectOptions"></