Vue表单与v-model

v-mode的基本用法

input和area的用法

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

        <input type="text" v-model='value'> 
        {{value}}
        <hr>

        <textarea name="" id="" cols="30" rows="10" v-model='msg'>我是多行文本的初始化值</textarea>
        <br>
        {{msg}}
        <hr>

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值
        猫蛋 <input type="radio" name="checks" value="猫蛋" v-model='checkname'> <br>
        狗蛋 <input type="radio" name="checks" value="狗蛋" v-model='checkname'> <br>
        翠花 <input type="radio" name="checks" value="翠花" v-model='checkname'> <br>
        现在选中的是: -------{{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: <input type="checkbox" v-bind:checked='oneradio'>
        多个复选框---用v-model: <input type="checkbox" v-model='oneradio'>
        <br>
        多个复选框:
        猫蛋: <input type="checkbox" value="猫蛋" v-model='checks'> <br>
        狗蛋: <input type="checkbox" value="狗蛋" v-model='checks'> <br>
        翠花: <input type="checkbox" value="翠花" v-model='checks'> <br>
        <br>
        现在选中了{{checks}}
        <hr>

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标签上

单选的下拉框:
        <select v-model='selected'>
            <option value="猫蛋">猫蛋</option>
            <option value="狗蛋">狗蛋</option>
            <option value="翠花">翠花</option>

        </select>---现在选中的是{{selected}}
        <br>
        <br>
        <br>
        <br>




        多选的下拉框
        <select v-model='selectedmul' multiple>
            <option value="猫蛋">猫蛋</option>
            <option value="狗蛋">狗蛋</option>
            <option value="翠花">翠花</option>

        </select>---现在选中的是{{selectedmul}}

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

image.png

绑定值

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

<input type="radio" v-model='picked' v-bind:value="value"> {{picked}}

image.png

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

复选框按钮: 
        <input type="checkbox" v-model='toggle' :true-value="value1" :false-value="value2">
        <br>
        {{toggle}} <br>
        被选中 {{toggle === value1}} <br>
        未被选中 {{toggle === value2}} <br>

image.png

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

<select v-model='valueselect' :value="{num: 111}">
            <option :value="{num: 111}">猫蛋</option>
            <option value="狗蛋">狗蛋</option>
            <option value="翠花">翠花</option>

        </select>---现在选中的是{{typeof valueselect}} ---{{valueselect.num}}

image.png

修饰符

lazy

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

<input type="text" v-model='inputstr'> --------{{inputstr}} <br>
        <input type="text" v-model.lazy='lazyStr'> --------{{lazyStr}} <br>

image.png

number

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

number:
        <input type="text" v-model.number='isNum'> <br>
        {{typeof isNum}}

image.png

trim

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

        <input type="text" v-model.trim='trimStr'> <br> {{trimStr.split('').length}}

image.png

简述v-model的作用

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