通常是在 form 表单相关的场景中会用到双向绑定相关, 核心是 v-model 的应用.
input 输入框
<!DOCTYPE html>
<html lang="en">
<head>
<title>input</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: 'hello, youge'
}
},
template: `
<div>
{{message}}
<input v-model="message" />
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
这里双向绑定指的是, message 和 input 框的输入内容和数据是"互相绑定和同步的" 任何一个发生改变, 则另一个同样改变, 核心就是 v-model 的功效. 对于 input 来说, 这里就不用写 value 相关的了.
<div>
{{message}}
<input v-model="message" />
</div>
textarea 多行输入框
多行输入标签和 input 是一样的写法. 同原生不同在于, 就一个单标签的方式即可完成编写.
template: `
<div>
{{message}}
<textarea v-model="message" />
</div>
`
radio 单选框
单选框, 只能选中一个选项, 因此用字符串来存储数据是非常合适的.
<!DOCTYPE html>
<html lang="en">
<head>
<title>radio</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: ""
}
},
template: `
<div>
{{message}}
youge <input type="radio" v-model="message" value="youge" />
youni <input type="radio" v-model="message" value="youni" />
myson <input type="radio" v-model="message" value="myson" />
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
checkbox 多选框
复选框就稍微复杂一点, 需要 value 来做标记, 同时数据的存储可以通过数组.
<!DOCTYPE html>
<html lang="en">
<head>
<title>chexbox</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
message: []
}
},
template: `
<div>
{{message}}
youge <input type="checkbox" v-model="message" value="youge" />
youni <input type="checkbox" v-model="message" value="youni" />
myson <input type="checkbox" v-model="message" value="myson" />
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
// 就勾选了 1, 3 然后数组显示了 1, 3
[ "myson", "youge" ] youge youni myson
因此 单选框 radio 和 多选框 checkbox 的共性都是需要 value 属性来绑定数据, 差异在于数据的存储上, radio 用字符串存储, checkbox 用数组存储即可.
select 下拉框
下拉框其实也就分单选和多选, 用法和上面的标签是一致的, 先来看单选的情况.