vue的表单
2024-09-08 19:01:48
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
输入框
实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>input 元素：</p>
<input v-model="message" placeholder="编辑我……">
<p>消息是: {{ message }}</p> <p>textarea 元素：</p>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div> <script>
new Vue({
el: '#app',
data: {
message: 'Runoob',
message2: '菜鸟教程\r\nhttp://www.runoob.com'
}
})
</script>
</body>
</html>
复选框
复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>单个复选框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label> <p>多个复选框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>选择的值为: {{ checkedNames }}</span>
</div> <script>
new Vue({
el: '#app',
data: {
checked : false,
checkedNames: []
}
})
</script>
</body>
</html>
单选按钮
以下实例中演示了单选按钮的双向数据绑定：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="radio" id="runoob" value="Runoob" v-model="picked">
<label for="runoob">Runoob</label>
<br>
<input type="radio" id="google" value="Google" v-model="picked">
<label for="google">Google</label>
<br>
<span>选中值为: {{ picked }}</span>
</div> <script>
new Vue({
el: '#app',
data: {
picked : 'Runoob'
}
})
</script>
</body>
</html>
select 列表
以下实例中演示了下拉列表的双向数据绑定：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<select v-model="selected" name="fruit">
<option value="">选择一个网站</option>
<option value="www.runoob.com">Runoob</option>
<option value="www.google.com">Google</option>
</select> <div id="output">
选择的网站是: {{selected}}
</div>
</div> <script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
</body>
</html>
最新文章
- 如果客户端禁用cookie，session还能使用吗？
- linux查看某个进程的线程id(spid)
- mybatis 简单使用示例（单独使用）：
- CUDA 6.5 && VS2013 && Win7：创建CUDA项目
- HDOJ 1075
- Day05_JAVA语言基础第五天
- Java Json开源解析包 google-gson download（下载）
- Python天天美味(25) - 深入理解yield
- PHP查看本地文件夹及删除文件夹操作
- 20175324 2018-2019-2 《Java程序设计》第5周学习总结
- vscode断点调试工程化客户端文件
- commonJS,常用js工具方法
- android手机 解锁bootloader 刷recovery 线刷rom 卡刷rom
- Repeater控件的分页实现
- Cisco交换机配置VLAN
- [译]Intel App Framework 3.0的变化
- September 15th 2017 Week 37th Friday
- 模拟器下的虚拟sd卡添加文件
- 学好js，这些js函数概念一定要知道
- 出现错误日志：The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found on the java.library.path