cssjshtml vue.js 表单单选与单选互斥
1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单选互斥</title>
<script src="/static/js/vue.min.js"></script>
</head>
<body>
<h1>单选</h1>
<div id="single">
<input type="radio" :checked="picked">
<label>单选按钮</label>
</div>
<h1>单选互斥</h1>
<div id="mutil">
<input type="radio" v-model="picked" value="python" id="python">
<label for="python">python</label>
<br>
<input type="radio" v-model="picked" value="java" id="java">
<label for="java">java</label>
<br>
<input type="radio" v-model="picked" value="shell" id="shell">
<label for="shell">shell</label>
<br>
<p>选择的是:{{ picked }}</p>
</div>
<script>
var single = new Vue(
{
el: '#single',
data: {
picked: true
}
}
);
var mutil = new Vue(
{
el: '#mutil',
data: {
picked: 'java'
}
}
)
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018/12/03 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读