学习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和默认选中的值的实现