内容添加列表
在輸入框輸入內(nèi)容點(diǎn)擊Enter按鈕時你輸入的內(nèi)容會顯示到下方列表中，并且會在內(nèi)容之后顯示出添加的時間。
效果演示
初始樣式
輸入內(nèi)容按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鍵可添加列表內(nèi)容"@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>獲取更多關(guān)注我呦！！！
總結(jié)
- 上一篇： 内网通看不到其他人_小学生在新版本里用“
- 下一篇： 厦门大学计算机科学与技术学院考研分数线,