在输入框输入内容点击Enter按钮时你输入的内容会显示到下方列表中，并且会在内容之后显示出添加的时间。
效果演示
初始样式
输入内容按Enter添加到列表
在程序开始之前请注意：
一定要引入Vue.js架包
代码演示
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>添加到列表</title><script src="js/vue.js"></script><style>#app{width:100%; padding:20px;}ul,li{padding:0; margin:0;}input{width:200px; height:30px; padding-left:10px;}.list{list-style:none; }.list li{width:300px; height:40px; line-height:40px; border-bottom:1px solid #af5b5e;}.list li span{float:left;}.list li em{float:right;}</style>
</head>
<body>
<div id="app"><input type="text" placeholder="按enter键可添加列表内容"@keydown.enter="enterFn"v-model="val"/><ul class="list"><li v-for="item in dataList"><span>{{item.title}}</span><em>{{item.date}}</em></li></ul>
</div>
<script>var Date = new Date()var vm = new Vue({el:'#app',data:{dataList:[],val:''},methods:{enterFn(){this.dataList.push({title:this.val,date:`${Date.getFullYear()}-${getTwo(Date.getMonth()+1)}-${getTwo(Date.getDate())}`})this.val=''}}})function getTwo(n){return n<10?'0'+n:''+n}
</script>
</body>
</html>
获取更多关注我呦！！！
