Vue页面表单的v-model

1.前置条件

script标签中写入
    export default {

        data () {
            return {
             uobj:{
                  name:'tom',
                  password:'tom123',
                  telephone:'13123456789',
                  username:'王江',
                  type:1,
                  isadmin: 1,
                  loves:['eat'],
                  loveInfo:""
               },
               typeArr:[
                  {id:1,name:'合格'},
                  {id:2,name:'良好'},
                  {id:3,name:'优秀'}
               ]
            }
        }

 }

template 标签中写入

        

用户注册

        

            

                
            

        

        

---

        

            

多个同名参数

            

               
            

        

2. 绑定 文本框，密码框，邮件框，数字框，文本域

在  id="myform" 的form中写入：

用户名:

密码:

手机:

真实姓名

显示效果：

注意：

修饰符 .lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
-- 在 "change" 而不是 "input" 事件中更新 --

修饰符 .number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：

这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
修饰符 .trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

3. 绑定单选按钮

在  id="myform" 的form中写入：

角色:
                 管理员
                 普通用户
 

显示效果：

注意：

isadmin的数值变化可以改变选择的按钮，1 就是 管理员  0 就是 普通用户

4. 下拉列表框

在  id="testForm" 的form中写入：

                    类型：
                    
                        
                            {{ item.name }}
                        
                    
 

显示效果：

注意：

type 的值 和 option 的值对应上就是选中

5. 多选框

在  id="testForm" 的form中写入：

                

                    爱好：
                    美食
                    音乐
                    运动
                

显示效果：

注意：

选中的值会自动加入 loves 的数组中

6. watch 的使用

export default { } 中加入：

        watch:{
            "uobj.loves":function(value){
                // alert(value.length);
                if(value.length > 0){
                    this.uobj.loveInfo = this.uobj.loves.join("-");
                }else{
                    this.uobj.loveInfo = "";
                }
            }
        }

注意：

watch 可以监听 vue对象属性数据的变化 （对象中的属性要加""），上面的代码表示在加入 loves数组的同时把数组元素进行拼接，然后赋值给loveInfo 方便后台接收。