vue实现调查问卷

最新推荐文章于 2024-03-03 09:35:12 发布

啥时候能干全栈

最新推荐文章于 2024-03-03 09:35:12 发布

阅读量7.6k

点赞数 4

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42177478/article/details/105172680

版权

vue 专栏收录该内容

27 篇文章 6 订阅

订阅专栏

同步展示：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="app">
        <div class="area"
             v-for = "area in 2"    
        >
        <h2>{{ area === 1 ? '提问区' : '回答展示区' }}</h2>
        <ul>
            <li
              v-for = "question in questionList"
              :key = "question.id"
            >
            <h3>{{ question.title }}</h3>
            <!-- 简答 -->
            <div v-if = 'question.type === "short"'>
                <input type="text" v-if="area===1" v-model = "question.answer">
                <span v-else>{{ question.answer }}</span>
            </div>
            <!-- 单选 -->
            <div v-else-if = 'question.type === "single" '>
                <!-- v-if和v-for不能同时出现在一个div上，把v-if放在父级，然后就多了一个div，可以用template不会渲染在页面上 -->
                <template v-if = "area === 1">
                     <div  v-for  = "choose in question.chooseList"  :key = "choose" >
                        <input type="radio" :value = "choose" v-model = "question.answer"/>
                         <span>{{ choose }}</span>
                </div>
                </template>
               <span v-else>{{ question.answer }}</span>
            </div>
            <!-- 多选题 -->
            <div v-else-if = "question.type === 'multiple'">
                <template v-if = "area === 1 ">
                    <div v-for = "choose in question.chooseList">
                        <input type="checkbox" :value = "choose" v-model = "question.answer"/>
                        <span>{{ choose }}</span>
                    </div>
                </template>
                <div v-else>{{ question.answer && question.answer.toString() }}</div>

            </div>
            <!-- 问答题 -->
            <div v-else>
                    <textarea v-if = "area === 1" v-model = 'question.answer'></textarea>
                <span v-else>
                   {{ question.answer }}

                </span>

            </div>

            </div>
        </li>
        </ul>
    </div>
    </div>

    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                questionList: [
  {
    type: 'short',
    title: '1.请问你的姓名是？',
    chooseList: null,
    id: 0
  },
  {
    type: 'single',
    title: '2.请问您的性别是？',
    chooseList: [
      '男',
      '女',
      '保密',
    ],
    id: 1,
  },
  {
    type: 'multiple',
    title: '3. 请选择您的兴趣爱好：',
    chooseList: [
      '看书',
      '游泳',
      '跑步',
      '看电影',
      '听音乐',
    ],
    id: 2,
  },
  {
    type: 'long',
    title: '4. 请介绍一下自己:',
    chooseList: null,
    id: 3,
  },
]

            }
        })
        vm.questionList.forEach(question => {
            const answer = question.type === 'multiple' ? [] : '';
            // question.answer = answer
            // answer为新添加的属性
            vm.$set(question,'answer',answer)
            // if(question.type === multiple){
            //     answer = [];
            // }else{
            //     answer = '';
            // }
        })
    </script>
</body>
</html>

* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-style: normal;
  }
  
  #app {
    display: flex;
    justify-content: space-between;
    width: 1000px;
    margin: 10px auto;
    border: 1px solid #000;
    border-radius: 5px;
  }
  
  #app .area {
    width: 50%;
  }
  
  #app .area:first-child {
    border-right: 1px dashed #000;
  }
  
  #app .area h2 {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 40px;
    font-size: 20px;
  }
  
  #app .area ul {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
  }
  
  #app .area ul li {
    margin-bottom: 20px;
  }
  
  #app .area ul li h3 {
    margin-bottom: 8px;
  }
  
  #app .area ul li input[type='text'],
  #app .area ul li textarea {
    width: 250px;
    height: 25px;
    padding-left: 8px;
    border-radius: 5px;
    border: 1px solid #888;
    font-size: 12px;
    outline: none;
  }
  
  #app .area ul li input[type='radio'],
  #app .area ul li input[type='checkbox'] {
    margin-bottom: 8px;
  }
  
  #app .area ul li textarea {
    padding-top: 8px;
    height: 100px;
  }

啥时候能干全栈

关注

4
点赞
踩
22

收藏

觉得还不错? 一键收藏
4
评论
vue实现调查问卷

同步展示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu...
复制链接

扫一扫