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

学习js、jquery、vue实现部分组件的更多相关文章

  1. js 实现vue—引入子组件props传参

    参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...

  2. 一丢丢学习之webpack4 + Vue单文件组件的应用

    之前刚学了一些Vue的皮毛于是写了一个本地播放器https://github.com/liwenchi123000/Local-Music-Player,如果觉得ok的朋友可以给个star. 就是很简 ...

  3. Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题

    Sortable.js 介绍 https://segmentfault.com/a/1190000008209715 项目中遇到的问题: A - 我需要在项目的拖拽组件中,使用背景 1 - 想到的第一 ...

  4. [js]jQuery EasyUI的linkbutton组件disable方法无法禁用jQuery绑定事件的问题分析

    问题由来 linkbutton 是 jQuery EasyUI 中常用的一个控件,可以使用它创建按钮.用法很简单,使用 a 标签给一个easyui-linkbutton 的class就可以了. < ...

  5. 用vue的抽象组件来做一个防止img标签url为空或url地址出错的验证

    看了网上文章学习了下vue的抽象组件,感觉就跟react的高阶组件一样的使用场景,只是更加面向vue的底层编程 ,网上介绍的抽象组件一般有2种用法,1 用来加防抖和节流 2 用来控制按钮是否允许点击做 ...

  6. Vue.js 学习笔记之七:使用现有组件

    5.3 使用现有组件 在之前的五个实验中,我们所演示的基本都是如何构建自定义组件的方法,但在具体开发实践中,并非项目中所有的组件都是需要程序员们自己动手来创建的.毕竟在程序设计领域,"不要重 ...

  7. day 83 Vue学习三之vue组件

    本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...

  8. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  9. day 82 Vue学习三之vue组件

      Vue学习三之vue组件   本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...

随机推荐

  1. java开发工具一个很好的注释模板

    <?xml version="1.0" encoding="UTF-8" standalone="no"?><templa ...

  2. (15)Linux命令基本格式

    1.命令提示符 登录系统后,第一眼看到的内容是: [root@localhost ~]# 这就是 Linux 系统的命令提示符.那么,这个提示符的含义是什么呢? []:这是提示符的分隔符号,没有特殊含 ...

  3. ArrayList源码分析(JDK1.8)

    概述 ArrayList底层是基于数组实现的,并且支持动态扩容的动态数组(变长的集合类).ArrayList允许空值和重复的元素,当向ArrayList中添加元素数量大于其底层数组容量时,会通过扩容机 ...

  4. jvm系列五-java内存模型初览(1)

    本文转载自:再有人问你Java内存模型是什么,就把这篇文章发给他. 网上有很多关于Java内存模型的文章,在<深入理解Java虚拟机>和<Java并发编程的艺术>等书中也都有关 ...

  5. docker 搭建 nginx负载均衡

    本文描述如何在一台机器上搭建nginx负载均衡,我将会启动3个nginx的docker,分别是1台前置nginx负责分发,后面2台负责处理请求. 首先我切换到/usr/local/docker/文件夹 ...

  6. HDU6403 Card Game【基环树 + 树形DP】

    HDU6403 Card Game 题意: 给出\(N\)张卡片,卡片正反两面都有数字,现在要翻转一些卡片使得所有卡片的正面的值各不相同,问最小翻转次数和最小翻转情况下的不同方案数 \(N\le 10 ...

  7. vector总结

    vector是不定长数组,具有静态数组的稳定性和动态分配内存的灵活性,在赛场上不失为指针之外牺牲部分时间的保险之举. 本文先介绍一些vector常用的函数(部分借鉴一篇博客中的内容 链接),并以此为铺 ...

  8. Java_web项目中在Java文件里面通过类装载器对资源文件读取

    承接上一节:在eclipse完成对Java_web项目里面资源文件的读取 我们首先在src目录下创建一个资源文件db.properties 内容如下: url=127.0.0.1 name=root ...

  9. 【noi 2.5_1789】算24(dfs)

    最开始我想的是全排列+枚举符号和括号的方法,但是我自己倒腾了很久还是打不对,只好向他人请教.正解很机智--直接随意将几个数"捆绑"在一起,值存在其中一个数上,其他数标记不可再选,直 ...

  10. A. Crazy Town

    Crazy Town is a plane on which there are n infinite line roads. Each road is defined by the equation ...