vue再读66-一次帮别人解决问题的案例

简介: vue再读66-一次帮别人解决问题的案例

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    请输入姓名
    <input type="text"> 请输入邮箱
    <input type="text">
    <ul></ul>
    <button>添加</button>
    <script>
        var btn = document.querySelector('button');
        var text = document.querySelectorAll('input');
        var ul = document.querySelector('ul');
        console.log(text);
        btn.onclick = function() {
            if (text.value == '') {
                return false;
            } else {
                var li = document.createElement('li');
                /*  console.log(text.value); */
                /* li.innerHTML = text[0].value;
                li.innerHTML = text[1].value; */
                /* console.log(text[1].value) */
                for (i = 0; i <= text.length - 1; i++) {
                    console.log(text[i].value);
                    /*   var ele = text[i].value
                      console.log(ele[i]); */
                    ul.appendChild(li);
                    li.innerHTML += text[i].value
                }
            }
        }
    </script>
</body>
</html>

image.png

相关文章
|
5天前
|
JavaScript
【vue】如何跳转路由到指定页面位置
【vue】如何跳转路由到指定页面位置
7 0
|
5天前
|
JSON JavaScript 前端开发
【vue】假数据的选择和使用
【vue】假数据的选择和使用
11 1
|
5天前
|
JavaScript 前端开发
【vue】iview如何把input输入框和点击输入框之后的边框去掉
【vue】iview如何把input输入框和点击输入框之后的边框去掉
12 0
|
1天前
|
资源调度 JavaScript 前端开发
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
【vue】vue中的路由vue-router,vue-cli脚手架详细使用教程
|
1天前
|
JavaScript 前端开发
vue组件化开发流程梳理,拿来即用
vue组件化开发流程梳理,拿来即用
|
1天前
|
JavaScript Go
Vue路由跳转及路由传参
Vue路由跳转及路由传参
|
2天前
|
JavaScript 前端开发 BI
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院
开发环境 技术架构:前后端分离 开发语言:C#.net6.0 开发工具:vs2022,vscode 前端框架:Vue,Ant-Design 后端框架:百小僧开源框架 数 据 库:sqlserver2019
采用前后端分离Vue,Ant-Design技术开发的(手麻系统成品源码)适用于三甲医院
|
4天前
|
监控 JavaScript
Vue中的数据变化监控与响应——深入理解Watchers
Vue中的数据变化监控与响应——深入理解Watchers
|
4天前
|
JavaScript 安全 前端开发
Vue 项目中的权限管理:让页面也学会说“你无权访问!
Vue 项目中的权限管理:让页面也学会说“你无权访问!
13 3
|
4天前
|
JavaScript 前端开发 开发者
Vue的神奇解锁:冒险的开始
Vue的神奇解锁:冒险的开始
5 1

相关实验场景

更多