欢迎光临

木子屋

标题: Vue表单双向绑定和取值示例

作者: dnawo

日期: 2022-03-21 10:52 PM

分类: 脚本语言

内容:
表单在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)

登录

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.848 ms

返回

标题: Vue表单双向绑定和取值示例

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.848 ms

返回

暂无评论

返回

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.895 ms

返回