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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券