2021-class-3---vue3-notes
/
作业 _demo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            font-size: 12px
        }

        #box {
            width: 800px;
            height: 700px;
            margin: 10px auto;
            border: solid 1px green;
            border-radius: 30px
        }

        #questions,
        #answers {
            float: left;
            height: 660px;
            width: 350px;
            padding: 20px
        }

        #questions {
            border-right: dashed 1px gray;
        }

        #questions>h1,
        #answers>h1 {
            font-size: 14px;
            text-align: center;
            margin-bottom: 20px
        }

        #box ul {
            margin: 5px 0 30px;
            clear: both;
        }

        #box ul>li {
            margin-top: 5px;
            height: 20px;
            line-height: 20px;
        }

        #textAreaBox {
            width: 250px;
            height: 60px;
            display: block;
        }

        span {
            float: right;
            display: block;
        }

        .title:hover {
            background-color: #ddd;
        }

        .delete {
            display: none;
        }

        .title:hover .delete {
            display: inline-block;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="questions">
            <h1>提问区</h1>
            <ul v-for="(obj, index) in questionList">
                <h3>{{index+1}}.{{obj.title}}</h3>
                <label v-if="obj.type === 'text'"><li><input v-bind:type="obj.type" v-bind:name="obj.name" v-model="obj.answer"></li></label>
                <label v-if="obj.type === 'radio'"><li v-for="option in obj.options"><input v-bind:type="obj.type"
                    v-bind:name="obj.name" v-model="obj.answer" :value="option.value" >{{option.label}}</li></label>
            </ul>

        </div>
        <div id="answers">
            <h1>答案收集</h1>
            <ul v-for="(obj,index) in questionList">
                <h3>{{index+1}}.{{obj.title}}</h3>
                <li>{{obj.answer}}</li>
            </ul>

            <button>提交</button>

        </div>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script type="text/javascript">
        const app = Vue.createApp({
            data: function () {
                return {
                    questionList: [
                        {
                            title: "请输入你的姓名?",
                            type: "text",
                            name: "username",
                            answer: ""
                        },
                        {
                            title: "请输入你的性别?",
                            type: "radio",
                            name: "sex",
                            answer: "",
                            options: [
                                {
                                    value: "男",
                                    label: "男"
                                },
                                {
                                    value: "女",
                                    label: "女"
                                },
                                {
                                    value: "未知",
                                    label: "未知"
                                }
                            ]
                        },

                    ]

                }
            }
        });
        //    将app实例挂载到div中
        app.mount('#box');

    </script>

</body>

</html>