VUE单选

最新推荐文章于 2025-06-03 17:06:43 发布

原创最新推荐文章于 2025-06-03 17:06:43 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

VUE 专栏收录该内容

34 篇文章

订阅专栏

这是一个使用 Vue.js 构建的简单示例，展示了如何通过 v-model 绑定单选按钮的选择，并在点击按钮时打印所选语言。用户可以在 vue、react 和 jquery 之间选择，并通过 handleSelect 方法提交选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="box">
        <input type="radio" v-model="favorlang" value="vue" name="vue">vue
        <input type="radio" v-model="favorlang" value="react" name="react">react
        <input type="radio" v-model="favorlang" value="jquery" name="vue">jquery
        <button @click="handleSelect()">单选提交</button>
    </div>
    <script>
        new Vue({
            el:'#box',
            data:{
                favorlang:'vue'
            },
            methods:{
                handleSelect(){
                    console.log(this.favorlang)
                }
            }
        })
    </script>
</body>
</html>