欢迎光临
我们一直在努力

vue.js动态添加删除单选radio按钮并获取值

本篇文章讲解一下vue.js如何动态添加删除单选radio按钮并获取值.

直接看效果

 

代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vue.js动态添加删除单选radio按钮并获取值</title>
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <style type="text/css">
        .layout { width: 1200px; margin: 0 auto; }
    </style>
</head>
<body>
    <div class="layout" id="app">
        <div v-for="(item,index) in list">
            <label>单选:</label>
            <input type="radio" :id="'radio1'+index" :name="'radioName'+index" value="1" v-model="item.Radio" /><label :for="'radio1'+index">选项一</label>
            <input type="radio" :id="'radio2'+index" :name="'radioName'+index" value="2" v-model="item.Radio" /><label :for="'radio2'+index">选项二</label>
            <button @click="del(index)">删除</button>

        </div>
        <div style="margin-top:10px">
            <button @click="add">新增一条</button>
            <button @click="save">保存</button>
        </div>
        <div>
            <div v-for="item in list">
                单选:<span style="color:red">{{item.Radio==1?'选项一':'选项二'}}</span>
            </div>
        </div>
        <div>
            {{saveStr}}
        </div>
    </div>
</body>
</html>

<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            list: [
                {
                    Radio: 1,
                }
            ],
            saveStr:""

        },
        methods: {

            //添加一行
            add: function () {
                this.list.push({
                    Radio: 1
                });
            },
            //删除一行
            del: function (index) {
                this.list.splice(index, 1);
            },
            //模拟保存数据
            save: function () {
                this.saveStr =JSON.stringify(this.list);

            }
        }
    });
</script>

 

 

相关文章

vue.js 动态添加删除文本框input、下拉框select、单选radio、多选checkbox的方案。

 

赞(2)
未经允许不得转载:自游互动 » vue.js动态添加删除单选radio按钮并获取值
分享到: 更多 (0)

自由技术,自由自在

项目合作联系我们