seo优秀网站分析,展厅设计图效果图大全,网站制作完成之后,asp做的药店网站模板用Vue实现备忘录功能。
程序分析#xff1a; 1.显示时间 2.添加内容 3.删除内容 4.修改内容 5.双向绑定
效果演示
初始样式 点击修改显示内容出现在输入框中 修改之后点击完成 点击删除 看了上述效果有没有心动的感觉呢#xff1f;#xff1f;#xff1f;
在程序开…用Vue实现备忘录功能。
程序分析 1.显示时间 2.添加内容 3.删除内容 4.修改内容 5.双向绑定
效果演示
初始样式 点击修改显示内容出现在输入框中 修改之后点击完成 点击删除 看了上述效果有没有心动的感觉呢
在程序开始之前请注意 引入Vue.js架包
代码演示
1.body内容
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlescript srcjs/vue.js/scriptscript srchttps://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js/scriptlink relstylesheet hrefcss/style.css //headbodydiv idapp!-- 头部内容位于最上面的内容 --headerh1备忘录span classright{{nowTime}}/span/h1/headersection!--双向绑定 输入文本内容--textarea v-modeldiary stylewidth: 100%;height: 200px; placeholder每天都要记的来找我呦/textareabutton clickfinished classfinish完成/button/sectionulli v-for(nb,i) in noteBooks!--双向绑定 显示文本内容--p v-htmlnb.text每天都要记的来找我呦/pdiv classbtn_groundbutton clickdel typebutton classdel left删除/button!-- 时间显示--span classtime v-textnb.time/spanbutton clickupDate(i) typebutton classupdate right修改/button/div/li/ul/divfooter著作人 zsh/footer/bodyscript srcjs/time.js typetext/javascript charsetUTF-8/script
/html
2.CSS样式
*{margin: 0;padding:0;}header,#app,footer{margin:0 8px;}header h1{color: #F92672;font-weight: normal;font-size: 24px;padding-top: 10px;padding-bottom: 4px;border-bottom: 1px solid #ccc;margin-bottom: 4px;}#app textarea{width: 100%;height: 200px;border: none;border-bottom: 1px solid #ccc;padding: 8px 4px;}button{padding: 4px;background-color: #fff;border: 1px solid #ccc;border-radius: 4px;}#app section{position: relative;}.finish{position: absolute;background-color: #A6E22E;width: 90px;height: 30px;bottom: 8px;right: 4px;}#app ul{margin-top: 8px;}#app li{border-bottom: 1px solid #CCCCCC;margin-bottom: 8px;}.left{float: left;}.right{float: right;}/* 组合选择器 */header span.right{font-size: 14px;padding-top:13px;}.btn_ground{height: 30px;margin-top: 4px;text-align: center;font-size: 8px;}.del{width: 50px;background-color: #AE81FF;color: #FFFFFF;}.update{width: 50px;background-color: #AE81FF;color: #FFFFFF;}footer{color: #999;text-align: center;font-size: 12px;}3.Vue内容
function getNowString() {//时间函数和数组var now new Date()var arr [日, 一, 二, 三, 四, 五, 六]return now.toLocaleDateString() 星期 arr[now.getDay()]}var App new Vue({el: #app,data: {nowTime: getNowString(),noteBooks: [{time: 2019/11/15 星期五,text: 今天出现了好长时间都没看到的太阳公公。}, {time: 2019/11/23 星期六,text: 今天我们一起去月季园}],diary: ,index: -1},methods: {finished: function() {//!App.diary是考虑App.diarynull的情况if (!App.diary || 0 App.diary.length) returnif (-1 App.index) {//存入noteBooks中//unshift插入到数组首位App.noteBooks.unshift({time: App.now,text: App.diary})} else {//修改App.noteBooks[App.index] {time: App.now,text: App.diary}App.index -1}App.diary App.now getNowString()},del: function(i) {// 删除 splice(起始下标,删除个数)App.noteBooks.splice(i, 1)},upDate: function(i) {var nb App.noteBooks[i]App.diary nb.textApp.now nb.time//App.index 为-1表示新增,其他就是修改App.index i}}})看到这里已经结束相信你已经对此程序有深刻的了解。
了解更多关注我呦
