~Vue实现简单答题功能，主要包含单选框和复选框

内容

　　实现简单答题效果

环境

　　Vue,webpack(自行安装)

实现方式

　　页面将答题列表传递给调用组件，组件将结果返回给调用页面(其它模式也ok，这只是例子)

--------------------------------------------分割线-----------------------------------------------

组件 zujian8.vue

调用页面 test.vue

该页面较长我就复制关键部分的代码

--------------------------------------------分割线-----------------------------------------------

组件引入

import input8 from './zujian8'   //引入

组件注册

components: {
    input8
  },

初始化答案数据

 

data () {
    return {
      list_a: [
        {'type': 1, 'name': 'one', 'question': 'Are you programmer?', 'answer': [{'value': 'A.Yes'}, {'value': 'B.No'}]},
        {'type': 1, 'name': 'two', 'question': 'Are you a man?', 'answer': [{'value': 'A.Of course'}, {'value': 'B.No'}]},
        {'type': 1, 'name': 'three', 'question': 'Are you a Staff?', 'answer': [{'value': 'A.Yes'}, {'value': 'B.No'}]},
        {'type': 1, 'name': 'four', 'question': 'Are you in sichuan?', 'answer': [{'value': 'A.Yes'}, {'value': 'B. No'}]},
        {'type': 2, 'name': 'five', 'question': 'How about your in skills?', 'answer': [{'value': 'A.Python'}, {'value': 'B.Vue'}, {'value': 'C.Php'}, {'value': 'D.Java'}]}
      ]
    }
  }

调用组件，接收组件返回值

定义函数

methos: {
  postAnswer: function (msg) {
      console.log(msg)
    }  
}

页面截图

如上图所示。

转载于:https://www.cnblogs.com/shuangzikun/p/python_taotao_vue_question.html