v-model

input

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

当数据messgae发生改变，input输入框中的内容也会发生改变

当input输入框中的数据发生改变，数据messgae也会跟着发生变化

这就是一个双向绑定

textarea

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

checkbox

双向绑定的变量初始值是true / false

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

双向绑定的变量初始值是数组

当有多个checkbox的时候，如果v-model绑定的属性都是message，那么选择一个就会全部都选上了，这并不是我们想要的效果，如果想达到勾选哪个就显示哪个checkbox的值，那么v-model绑定的值就不能是true或false，而是应该用数组去存,同时每个input输入框中应该有个value，告诉vue每个input框对应的值是什么，如果不写这个value，vue是不知道该往数组中存什么样的数据

const app = Vue.createApp({
    data() {
        return {
            message: []
        }
    },
    template: `
    <div>
        {{message}}
        Jack<input type="checkbox" v-model="message" value="Jack"/>
        Tom<input type="checkbox" v-model="message" value="Tom"/>
        Susan<input type="checkbox" v-model="message" value="Susan"/>
    </div>
`
})
const vm = app.mount('#root')

自定义值而不是true/false

如果是用hello表示选中时chebox的值，用world表示未选中时chebox的值呢？而不是用true和false，表示选中与否

const app = Vue.createApp({
    data() {
        return {
            message: 'world',
        }
    },
    template: `
    <div>
        {{message}}
        <input type="checkbox" v-model="message" true-value="hello" false-value="world"/>
    </div>
`
})
const vm = app.mount('#root')

radio

双向绑定的变量初始值是字符串

const app = Vue.createApp({
    data() {
        return {
            message: ""
        }
    },
    template: `
    <div>
        {{message}}
        Jack<input type="radio" v-model="message" value="Jack"/>
        Tom<input type="radio" v-model="message" value="Tom"/>
        Susan<input type="radio" v-model="message" value="Susan"/>
    </div>
`
})
const vm = app.mount('#root')

select

在selecct上使用v-model进行双向数据绑定

如果是单选

如果是单选那么双向绑定的变量初始值是字符串

 const app = Vue.createApp({
    data() {
        return {
            message: ""
        }
    },
    template: `
    <div>
        {{message}}
        <select v-model="message">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
    </div>
`
})
const vm = app.mount('#root')

初始值是空的，给它加一个默认值，可以给个默认值A、B、C中的任意一个

也可以就让默认值是空，那么就给个空的option

const app = Vue.createApp({
    data() {
        return {
            message: ""
        }
    },
    template: `
    <div>
        {{message}}
        <select v-model="message">
            <option disabled value="">请选择内容</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
    </div>
`
})
const vm = app.mount('#root')

如果是多选

如果是单选那么双向绑定的变量初始值是空数组

const app = Vue.createApp({
    data() {
        return {
            message: []
        }
    },
    template: `
    <div>
        {{message}}
        <select v-model="message" multiple>
            <option disabled value="">请选择内容</option>
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
        </select>
    </div>
`
})
const vm = app.mount('#root')

按住shift键也是支持多选的

展示的值是字符，但是存的值是对象

使用v-for改造一下，同时如果我们选择A，但是存值的时候不想存字符串A，而是想存一个对象呢？

const app = Vue.createApp({
    data() {
        return {
            message: [],
            options:[
                {
                  text:'A',value:{value:'A'},
                },
                {
                  text:'B',value:{value:'B'},
                },
                {
                  text:'C',value:{value:'C'},
                },
            ]
        }
    },
    template: `
    <div>
        {{message}}
        <select v-model="message" multiple>
            <option v-for="item in options" :value="item.value">{{item.text}}</option>
        </select>
    </div>
`
})
const vm = app.mount('#root')

v-model指令修饰符

.lazy

失去焦点时才触发数据双向绑定

const app = Vue.createApp({
    data() {
        return {
            message: 'world',
        }
    },
    template: `
    <div>
        {{message}}
        <input  v-model.lazy="message"/>
    </div>
`
})
const vm = app.mount('#root')

失去焦点前：

失去焦点后：

.number

有的时候我们在输入框中输入的数字，看似是数字，但是其实是字符串类型。那如果我们想要在输入数字的时候，它是number类型，就要使用.number修饰符

const app = Vue.createApp({
    data() {
        return {
            message: 'world',
        }
    },
    template: `
    <div>
        {{typeof message}}
        <input  v-model.number="message"/>
    </div>
`
})
const vm = app.mount('#root')

使用.number修饰符之前

使用.number修饰符之后

.number修饰符的作用就是将输入框中输入的数字类型的字符串转成number类型，再存到message变量中

trim

去除字符串前后多余的空格(如果空格加在字符串中间trim会无效)

表单中双向绑定指令