label绑定数据
查看实例：
- <html>
- <head>
- <title>test</title>
- <meta http-equiv="content-Type" content="text/html;charset=utf-8">
- </head>
- <body>
- <form>
- //第一种：
- //文字必须是label标签内,checkbox的id和<label>标签内的for=""中的名字必须相同.
- <input type="checkbox" id="check1" value="go" name="name">
- <label for="check1">姓名</label>
- <input type="checkbox" id="check2" value="on" name="name">
- <label for="check2">密码</label>
- //第二种：
- //把文字和checkbox包含在<label>标签内
- <label>测试<input type="checkbox" id="11" /></label>
- </form>
- </body>
- </html>
注意事项:文字必须是label标签内,checkbox的id和<label>标签内的for=""中的名字必须相同.
vue中label实现绑定：
1、多选绑定一个数组
<div id="dong">
<span>{{message}}</span>=<span v-text="message"></span>
<span v-html="msgHtml"></span>
<hr>
<p>
<input type="checkbox" value="pp" v-model="web_names" id="one">
<label for="one">pan</label><br/>
<input type="checkbox" value="gg" v-model="web_names" id="twe">
<label for="twe">gg</label><br/>
<input type="checkbox" value="ww" v-model="web_names" id="three">
<label for="three">ww</label><br>
<input type="checkbox" value="vv" v-model="web_names" id="four">
<label for="four">vgo</label>
<p>{{web_names}}</p>
</p>
</div>
var dong=new Vue({
el:'#dong',
data:{
message:'hello vue!',
msgHtml:'<h2>hello vue</h2>',
web_names:[]
}
})
2、单选绑定一个数组
<h3>单选按钮绑定</h3>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<p>{{sex}}</p>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！