查看实例：
- <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>