可以用 v-model 指令在表单控件元素上创建双向数据绑定
一，input
如下示例：让msg值与input框绑定，当我改变input框的内容，外面内容也会随之改变
用了v-model 绑定数据，input就不用写value属性
const app = Vue.createApp({
data() {
return {
msg:'hello vue3'
}
},
template: `
{{msg}}
`
});
const vm = app.mount('#contentMain');
打印结果：
image.png
二，textarea
示例如下：
const app = Vue.createApp({
data() {
return {
msg:'hello vue3'
}
},
template: `
{{msg}}
`
});
const vm = app.mount('#contentMain');
打印结果：
image.png
三，复选框 checkbox
示例如下：
checkbox时，msg值是true 或者false，true是选中 false是未勾选
const app = Vue.createApp({
data() {
return {
msg:false
}
},
template: `
{{msg}}
`
});
const vm = app.mount('#contentMain');
打印结果：
image.png
多个checkbox时，msg值可写成数组，用来存选中的数据，写上value值，能够知道数组内存什么内容
示例如下：
const app = Vue.createApp({
data() {
return {
msg:[]
}
},
template: `
{{msg}}
roadbicycle
mountainbike
electrocar
`
});
const vm = app.mount('#contentMain');
结果：
image.png
checkbox是用 true或者false来表示的，如果想改变true或者false的值 写法如下：
const app = Vue.createApp({
data() {
return {
msg:'我被选中了'
}
},
template: `
{{msg}}
`
});
const vm = app.mount('#contentMain');
目前会出现的问题：当msg里的值默认为是"我被选中了"的时候，显示的是未选中状态，如下图：可能是vue支持的问题，
image.png
改成"没被选中" 不会出问题，如下代码：
const app = Vue.createApp({
data() {
return {
msg:'没被选中'
}
},
template: `
{{msg}}
`
});
const vm = app.mount('#contentMain');
四，单选框 radio
用法与checkbox一样，radio是单选 所以用字符串进行存储即可 示例如下：
const app = Vue.createApp({
data() {
return {
msg:''
}
},
template: `
{{msg}}
roadbicycle
mountainbike
electrocar
`
});
const vm = app.mount('#contentMain');
结果：
image.png
五，select
基本写法：
const app = Vue.createApp({
data() {
return {
msg:''
}
},
template: `
{{msg}}
`
});
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: `
{{msg}}
`
});
const vm = app.mount('#contentMain');
结果：
image.png
六，修饰符
lazy修饰符，
当input输入完内容失去焦点的时候，msg内容才发生变化，示例如下：
const app = Vue.createApp({
data() {
return {
msg:'没被选中'
}
},
template: `
{{msg}}
`
});
const vm = app.mount('#contentMain');
number修饰符：
可做类型的转换，如把字符串转为number类型， 示例如下：
const app = Vue.createApp({
data() {
return {
msg:'没被选中'
}
},
template: `
{{msg}}
`
});
const vm = app.mount('#contentMain');
trim：
去除数据前后的空格，示例如下：
const app = Vue.createApp({
data() {
return {
msg:'没被选中'
}
},
template: `
{{msg}}
`
});
const vm = app.mount('#contentMain');
src=http___p0.ssl.qhimgs4.com_t01d7887d898734a0a2.gif&refer=http___p0.ssl.qhimgs4.gif