可以用 v-model 指令在表单控件元素上创建双向数据绑定

一，input

如下示例：让msg值与input框绑定，当我改变input框的内容，外面内容也会随之改变
用了v-model 绑定数据，input就不用写value属性

    const app = Vue.createApp({
        data() {
            return {
                msg:'hello vue3'
            }
        },
        template: `
            <div>
                {{msg}}
                <input v-model = "msg"/>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

打印结果：

image.png

二，textarea

示例如下：

    const app = Vue.createApp({
        data() {
            return {
                msg:'hello vue3'
            }
        },
        template: `
            <div>
                {{msg}}
                <textarea v-model = "msg"></textarea>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

打印结果：

image.png

三，复选框 checkbox

示例如下：
checkbox时，msg值是true 或者false，true是选中 false是未勾选

    const app = Vue.createApp({
        data() {
            return {
                msg:false
            }
        },
        template: `
            <div>
                {{msg}}
                <input v-model = "msg" type ="checkbox"/>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

打印结果：

image.png

多个checkbox时，msg值可写成数组，用来存选中的数据，写上value值，能够知道数组内存什么内容
示例如下：

    const app = Vue.createApp({
        data() {
            return {
                msg:[]
            }
        },
        template: `
            <div>
                
                <div>{{msg}}</div>
                roadbicycle <input v-model = "msg" type ="checkbox" value ="roadbicycle"/>
                mountainbike <input v-model = "msg" type ="checkbox" value ="mountainbike"/>
                electrocar <input v-model = "msg" type ="checkbox" value ="electrocar"/>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

结果：

image.png

checkbox是用 true或者false来表示的，如果想改变true或者false的值 写法如下：

    const app = Vue.createApp({
        data() {
            return {
                msg:'我被选中了'
            }
        },
        template: `
            <div>
                
                {{msg}}
               <input type="checkbox" v-model ="msg" true-value ="我被选中了" false-value ="没被选中" />
            </div>
            `
    });
    const vm = app.mount('#contentMain');

目前会出现的问题：当msg里的值默认为是"我被选中了"的时候，显示的是未选中状态，如下图：可能是vue支持的问题，

image.png

改成"没被选中" 不会出问题，如下代码：

    const app = Vue.createApp({
        data() {
            return {
                msg:'没被选中'
            }
        },
        template: `
            <div>
                
                {{msg}}
               <input type="checkbox" v-model ="msg" true-value ="我被选中了" false-value ="没被选中" />
            </div>
            `
    });
    const vm = app.mount('#contentMain');

四，单选框 radio

用法与checkbox一样，radio是单选 所以用字符串进行存储即可 示例如下：

     const app = Vue.createApp({
        data() {
            return {
                msg:''
            }
        },
        template: `
            <div>
                
                <div>{{msg}}</div>
                roadbicycle <input v-model = "msg" type ="radio" value ="roadbicycle"/>
                mountainbike <input v-model = "msg" type ="radio" value ="mountainbike"/>
                electrocar <input v-model = "msg" type ="radio" value ="electrocar"/>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

结果：

image.png

五，select

基本写法：

    const app = Vue.createApp({
        data() {
            return {
                msg:''
            }
        },
        template: `
            <div>
                
                {{msg}}
                <select v-model ="msg">
                    <option disabled value = ''>请选择数字</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                </select>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

select做多选可给select加入 multiple 属性 按住ctrl键，可进行多选
如果有很多数据情况下，建议用v-for循环方式，示例如下：

    const app = Vue.createApp({
        data() {
            return {
                msg:[],
                options:[
                    {tit:'1',value:{value:'a'}},
                    {tit:'2',value:{value:'b'}},
                    {tit:'3',value:{value:'c'}}]
            }
        },
        template: `
            <div>
                
                {{msg}}
                <select v-model ="msg" multiple>
                    <option v-for = "item in options" :value ="item.value">{{item.tit}}</option>
                </select>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

结果：

image.png

六，修饰符

lazy修饰符，

当input输入完内容失去焦点的时候，msg内容才发生变化，示例如下：

    const app = Vue.createApp({
        data() {
            return {
                msg:'没被选中'
            }
        },
        template: `
            <div>
                {{msg}}
               <input v-model.lazy ="msg"/>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

number修饰符：

可做类型的转换，如把字符串转为number类型， 示例如下：

    const app = Vue.createApp({
        data() {
            return {
                msg:'没被选中'
            }
        },
        template: `
            <div>
                {{msg}}
               <input v-model.number ="msg" type="number"/>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

trim：

去除数据前后的空格，示例如下：

    const app = Vue.createApp({
        data() {
            return {
                msg:'没被选中'
            }
        },
        template: `
            <div>
                {{msg}}
               <input v-model.trim ="msg"/>
            </div>
            `
    });
    const vm = app.mount('#contentMain');

src=http___p0.ssl.qhimgs4.com_t01d7887d898734a0a2.gif&refer=http___p0.ssl.qhimgs4.gif