Vue表单与v-model

v-mode的基本用法

input和area的用法

可以用于input框，以及textarea等
： 所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的value

         
        {{value}}
        


        我是多行文本的初始化值
        

        {{msg}}
        

var app = new Vue({
            el: '#app',
            data: {
                value: '',
                msg: '',
                oneradio: true,
                checkname: '猫蛋'
            }
        })

image.png

单选框

1. 单个单选按钮，直接用v­bind绑定一个布尔值，用v­model是不可以的
2. 如果是组合使用，就需要v­model来配合value使用，绑定选中的单选框的value值，
   此处所绑定的初始值可以随意给

多个单选框:
        v-modelS绑定的是单选框的value值
        猫蛋  

        狗蛋  

        翠花  

        现在选中的是: -------{{checkname}}

var app = new Vue({
            el: '#app',
            data: {
                value: '',
                msg: '',
                oneradio: true,
                checkname: '猫蛋'
            }
        })

image.png

复选框

单个复选框，直接用定一个布尔值，可以用v­model可以用v­bind
2.多个复选框– 如果是组合使用，就需要v­model来配合value使用，v­model绑定一
个数组—如果绑定的是字符串，则会转化为true。false，与所有绑定的复选框的
checked属性相对应

复选框
        单个复选框---用v-bind: 
        多个复选框---用v-model: 
        

        多个复选框:
        猫蛋:  

        狗蛋:  

        翠花:  

        

        现在选中了{{checks}}
        

var app = new Vue({
            el: '#app',
            data: {
                value: '',
                msg: '',
                oneradio: true,
                checkname: '猫蛋',
                checks: []
            }
        })

image.png

下拉框

1. 如果是单选，所绑定的value值初始化可以为数组，也可以为字符串，有value直接优
   先匹配一个value值，没有value就匹配一个text值
2. 如果是多选，就需要v­model来配合value使用，v­model绑定一个数组，与复选框类
   似
3. v­model一定是绑定在select标签上

单选的下拉框:
        
            猫蛋
            狗蛋
            翠花

        ---现在选中的是{{selected}}
        

        

        

        





        多选的下拉框
        
            猫蛋
            狗蛋
            翠花

        ---现在选中的是{{selectedmul}}

var app = new Vue({
            el: '#app',
            data: {
                value: '',
                msg: '',
                oneradio: true,
                checkname: '猫蛋',
                checks: [],
                selected: [],
                selectedmul: []
            }
        })

image.png

绑定值

• 单选框
  只需要用v­bind给单个单选框绑定一个value值，此时，v­model绑定的就是他的value值

 {{picked}}

image.png

-复选框
----选中和不选中的value不一样

复选框按钮: 
        
        

        {{toggle}} 

        被选中 {{toggle === value1}} 

        未被选中 {{toggle === value2}} 

image.png

• 下拉框
  在select标签上绑定value值对option并没有影响

            猫蛋
            狗蛋
            翠花

        ---现在选中的是{{typeof valueselect}} ---{{valueselect.num}}

image.png

修饰符

lazy

*——v­model默认是在input输入时实时同步输入框的数据，而lazy修饰符，可以使其
在失去焦点或者敲回车键之后在更新

 --------{{inputstr}} 

         --------{{lazyStr}} 

image.png

number

*—————— 将输入 的字符串转化为number类型

number:
         

        {{typeof isNum}}

image.png

trim

trim自动过滤输入过程中收尾输入的空格

         
 {{trimStr.split('').length}}

image.png

简述v-model的作用

-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值