表单在HTML页面很常见，下边我们看下Vue表单数据绑定和取值：
1).text - 单行文本
<div id="example">
<input type="text" v-model="result">
<p>Result: {{result}}</p>
</div>
<script>
new Vue({
el: '#example',
data: {
result: '' //string
}
})
</script>2).textarea - 多行文本
<div id="example">
<textarea v-model="result"></textarea>
<p>Result: {{result}}</p>
</div>
<script>
new Vue({
el: '#example',
data: {
result: '' //string
}
})
</script>3).radio - 单选按钮
<div id="example">
<input type="radio" value="A" v-model="result">
<label for="A">A</label>
<input type="radio" value="B" v-model="result">
<label for="B">B</label>
<input type="radio" value="C" v-model="result">
<label for="C">C</label>
<p>Result: {{result}}</p>
</div>
<script>
new Vue({
el: '#example',
data: {
result: '' //string
}
})
</script>4).checkbox - 复选框(单选)
<div id="example">
<input type="checkbox" v-model="result">
<label for="checkbox">agree</label>
<p>Result: {{result}}</p>
</div>
<script>
new Vue({
el: '#example',
data: {
result: false //boolean
}
})
</script>5).checkbox - 复选框(多选)
<div id="example">
<input type="checkbox" value="A" v-model="result">
<label for="A">A</label>
<input type="checkbox" value="B" v-model="result">
<label for="B">B</label>
<input type="checkbox" value="C" v-model="result">
<label for="C">C</label>
<p>Result: {{result}}</p>
</div>
<script>
new Vue({
el: '#example',
data: {
result: [] //array
}
})
</script>6).select - 下拉列表(单选)
<div id="example">
<select v-model="result">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>Result: {{result}}</p>
</div>
<script>
new Vue({
el: '#example',
data: {
result: '' //string
}
})
</script>7).select - 下拉列表(多选)
<div id="example">
<select multiple v-model="result">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>Result: {{result}}</p>
</div>
<script>
new Vue({
el: '#example',
data: {
result: [] //array
}
})
</script>参考资料
[1].Vue表单输入绑定：https://cn.vuejs.org/v2/guide/forms.html
评论（0）
暂无评论。