//js写留言板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用原生js实现留言板功能</title>
    <style type="text/css">
      div{
          background-color: #dae3ff;
      }
    </style>
</head>
<body>
**知识点**<br>
1. 获取元素<br>
2. 创建元素<br>
3. 添加元素<br>
    <h4>留言板</h4>
        <div id="app">
            <input type="text">
            <button>提交</button>
            <ul></ul>
        </div>
<script>
    let input=document.querySelector("input");
    let button=document.querySelector("button");
    let ul=document.querySelector("ul");

    button.onclick=function () {
        //创建新元素
        let li=document.createElement('li');

        //添加元素
        li.innerHTML=input.value;

        //将新元素添加到页面中
        //ul.appendChild(li);
        //判断当前列表是否为空，空则直接加，非空则插到前面
        if(ul.children.length===0){
            ul.appendChild(li);
        }else{
            let first=ul.firstElementChild;
            ul.insertBefore(li,first);
        }

        //清空input的内容
        input.value='';

    }
</script>
</body>
</html>

//Vue写留言板
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用Vue快速制作一个留言板</title>
    <style type="text/css">
        div{
            background-color: #dae3ff;
        }
    </style>
</head>
<body>
**知识点**<br>
1. 获取元素<br>
2. 创建元素<br>
3. 添加元素<br>
<h4>留言板</h4>
<div id="app">
    <input type="text" v-model="input" placeholder="输入">
    <button @click="fill">提交</button>
    <ul>
        <li v-for="item in li">{{item}}</li>
    </ul>
</div>
<script src="../vue.js"></script>
<script>
    let vm=new Vue({
       el:'#app',
       data:{
           input:'',
           li:[]
       },
        methods:{
           fill:function () {
               //this.li.push(this.input);//push添加

               //头部添加
               this.li.unshift(this.input);

               //清空留言区
               this.input='';

           }
        }
    });
</script>
</body>
</html>
												


											
vue 比 js的强大的更多相关文章
	

    
								
  1. fis3+vue+pdf.js制作预览PDF文件或其他
		
    人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
    
		
    2. 
						
  2. vue.common.js?e881:433 TypeError: Cannot read property 'nodeName' of undefined
		
    我觉得吧,是这么个原因,就是响应式要找这个node改它的内容,没找着,就报错了. 用computed监控vuex的state属性,绑定到页面上,如果这个属性改了,因为响应式,那么就要更改页面,如果页面 ...
    
		
    3. 
						
  3. JS的强大
		
    JS很强大,对于网页设计者来说,会用JS真的很重要. 学好我的linux,和数据结构.
    
		
    4. 
						
  4. 基于Node.js的强大爬虫 能直接发布抓取的文章哦
		
    基于Node.js的强大爬虫 能直接发布抓取的文章哦 基于Node.js的强大爬虫能直接发布抓取的文章哦!本爬虫源码基于WTFPL协议,感兴趣的小伙伴们可以参考一下 一.环境配置 1)搞一台服务器,什 ...
    
		
    5. 
						
  5. vue+node.js+webpack开发微信公众号功能填坑——v -for循环
		
    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...
    
		
    6. 
						
  6. 在线jquery.min.js、vue.min.js引用
		
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js ...
    
		
    7. 
						
  7. vue.eslintrc.js常用配置
		
    vue.eslintrc.js module.exports = { root: true, env: { node: true }, extends: [ "plugin:vue/esse ...
    
		
    8. 
						
  8. js插件---强大的图片裁剪Cropper
		
    js插件---强大的图片裁剪Cropper 一.总结 一句话总结:官网或者github里面的文档或者demo才是真的详细 使用的话找到图片裁剪后的base64数据,然后这个数据可下载可传递到服务器 1 ...
    
		
    9. 
						
  9. vue3.0 vue.config.js 配置实战
		
    今天讲述一下vue-config.js配置,我们前面搭建好脚手架会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么问题来了,我们如何去开发我们的项目呢,比如 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. SpringBoot 2.x 开发案例之前后端分离鉴权
			
    前言 阅读本文需要一定的前后端开发基础,前后端分离已成为互联网项目开发的业界标准使用方式,通过Nginx代理+Tomcat的方式有效的进行解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微 ...
    
			
    2. 
						
  2. Java的运行时数据存储机制
			
    原文地址:http://yanwushu.sinaapp.com/java_data_storage/ Java程序在运行时需要为一系列的值或者对象分配内存,这些值都存在什么地方?用什么样的数据结构存 ...
    
			
    3. 
						
  3. 数据结构和算法(Golang实现)(13)常见数据结构-可变长数组
			
    可变长数组 因为数组大小是固定的,当数据元素特别多时,固定的数组无法储存这么多的值,所以可变长数组出现了,这也是一种数据结构.在Golang语言中,可变长数组被内置在语言里面:切片slice. sli ...
    
			
    4. 
						
  4. sql server临时删除/禁用非聚集索引并重新创建加回/启用的简便编程方法研究对比
			
    前言: 由于新型冠状病毒影响,博主(zhang502219048)在2020年1月份从广东广州工作地回到广东揭阳产业转移工业园磐东街道(镇里有阳美亚洲玉都.五金之乡,素以“金玉”闻名)老家后,还没过去 ...
    
			
    5. 
						
  5. 基于 Njmon + InfluxDB + Grafana 实现性能指标实时可视监控
			
    引言 最近逛 nmon 官网时,发现了一个新工具 njmon,功能与 nmon 类似,但输出为 JSON 格式,可以用于服务器性能统计. 可以使用 njmon 来向 InfluxDB 存储服务器性能统 ...
    
			
    6. 
						
  6. 利用Ajax实现异步请求
			
    Ajax 1.课程引入      静态网站和动态网站都是同步的,但同步方式有缺点:页面请求响应式阻塞,影响用户体验      为了解决这个问题,可以通过变通的手段实现页面的局部更新(隐藏帧),由于隐藏 ...
    
			
    7. 
						
  7. python高级特性之封包与解包
			
    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:kwsy PS:如有需要Python学习资料的小伙伴可以加点击下方链接 ...
    
			
    8. 
						
  8. python字节码，java字节码，十六进制相互转换
			
    下面是互相转换的代码: 有想要了解更多关于python知识的请在下方评论或私信小编
    
			
    9. 
						
  9. 哈密顿绕行世界问题  HDU2181
			
    题目大意都比较简单,用vector存一下图,然后爆搜就可以了. #include<bits/stdc++.h> using namespace std; ; vector<]; bo ...
    
			
    10. 
						
  10. async,await执行流看不懂？看完这篇以后再也不会了
			
    昨天有朋友在公众号发消息说看不懂await,async执行流,其实看不懂太正常了,因为你没经过社会的毒打,没吃过牢饭就不知道自由有多重要,没生过病就不知道健康有多重要,没用过ContinueWith就 ...
    
			
    11.