学习js、jquery、vue实现部分组件

通过js实现radio小组件，最终效果如下

html代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>js实现radio功能</title>
  </head>
  <body>
    <script src="../js/jsRadio.js"></script>
    <script>
      var strs = [
        
      ]
      for (var i = 0; i < 50; i++) {
        var rId = "r"+i;
        var st2 = [
          { name: rId, value: "A" },
          { name: rId, value: "B",disabled:true },
          { name: rId, value: "C" }
        ];
        strs.push(st2)
      }
      createRadios(strs);
      
    </script>
  </body>
</html>

js代码：

function createRadios(data){

for(var j = 0;j < strs.length;j++){

var divStr = "<div id='" + (j+1) + "'>" + "题目" + j + " </div>"

for(var i = 0;i<strs[j].length;i++){

if(strs[j][i].disabled){

divStr += strs[j][i].value+"<input type = 'radio' disabled name = '" + strs[j][i].name + "value='"+strs[j][i].value+"' />"

}else{

divStr += strs[j][i].value+"<input type = 'radio' name = '" + strs[j][i].name + "value='"+strs[j][i].value+"' />"

}

divStr += "</div>"

document.write(divStr)

}

通过jQuery实现方式；

html代码：

<!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>jQuery实现radio</title>
  </head>
  <body>
    <script src="../js/jquery-2.0.0.js"></script>
    <script src="../js/jQueryRadio.js"></script>
    <div id="app"></div>
    <script type="text/javascript">
      var strs = []
      for (var i = 0; i < 50; i++) {
        var rId = 'r' + i
        var st2 = [
          { name: rId, value: 'A' },
          { name: rId, value: 'B', disabled: true },
          { name: rId, value: 'C' }
        ]
        strs.push(st2)
      }
      $('#app').createRadio(strs)
    </script>
  </body>
</html>

js代码：

;(function ($) {
  $.fn.extend({
    createRadio: function (strs) {
      for (let i = 0; i < strs.length; i++) {
        var html = ''
        const str = strs[i]
        html = '<div>'
        html += '题目' + (i + 1) + '</div>'
        for (let j = 0; j < str.length; j++) {
          const st = str[j]
          html += st.value + "<input type='radio' name='" + st.name + "' value='" + st.value + "'>"
        }
        $(this).append(html)
      }
    }
  })
})(jQuery)

通过vue实现：

组件代码：

<template>
  <div>
    <div v-for="(str,index) in msgs" :key="index">
        <div>题目{{index+1}}
            <div v-for="(st,index) in str" :key="index">
                <div v-if="st.disabled == true">
                {{st.value}}<input type="radio" disabled :name="st.name" :value="st.value"/>
                </div>
                <div v-else>
                    <div v-if="st.value == defaultV">
                        {{st.value}}<input type="radio" :name="st.name" :value="st.value" checked/>
                    </div>
                    <div v-else>
                        {{st.value}}<input type="radio" :name="st.name" :value="st.value"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VueRadio',
  props: {
    msgs: Array,
    defaultV:String
  }
}
</script>

调用组件代码：

<template>
  <div id="app">
    <VueRadio :msgs="strs" :defaultV="defaultValue"/>
  </div>
</template>

<script>
import VueRadio from './components/VueRadio.vue'

export default {
  components: {
    VueRadio
  },
  data() {
      return {
          strs: [],
          defaultValue:"A"
      }
  },
  created() {
      var strsTemp = []
      for (var i = 0; i < 30; i++) {
        var rId = "r"+i;
        var st2 = [
          { name: rId, value: "A" },
          { name: rId, value: "B",disabled:true },
          { name: rId, value: "C" }
        ];
        strsTemp.push(st2)
      }
      this.strs = strsTemp;
  }
}
</script>

vue实现组件是进行了优化，添加了默认disabled和默认选中的值的实现