本文实例为大家分享了Vue.js实现备忘录的具体代码,供大家参考,具体内容如下
效果展示:
html代码:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; !——移动设备设置——比;
& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1,最小规模=1,最大范围=1,user-scalable=不”比;
& lt; title>记事本& lt;/title>
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/css/noteUI.css "比;
& lt; !——vue核心框架——比;
& lt;脚本src=" https://www.yisu.com/zixun/vue/vue.js " type=" text/javascript " charset=皍tf - 8”祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/vue/vue-resource.min.js " type=" text/javascript " charset=皍tf - 8”祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt; !——一般用于头部——比;
& lt; header>
& lt; h2>备忘录& lt;跨类=罢贰钡脑趝{现在}}& lt;/span> & lt;/h2>
& lt;/header>
& lt; section>
& lt; !——多行文本——比;
& lt; !——视图传数据——比;
& lt; !——v模型=叭占恰彼蚴莅蠖ā?
& lt; textarea v模型=叭占恰闭嘉环?靶慈占鞘且桓龊孟肮摺北?
& lt;/textarea>
& lt; !——@click='完成'绑定方法属性中的方法——比;
& lt;按钮@click==巴瓿伞薄巴瓿伞崩嘣谕瓿? lt;/button>
& lt;/section>
& lt; ul>
& lt; !——循环遍历数据中的noteooks属性B,每次循环都赋值给nb——比;
& lt; !——v="(数组值,数组下标)笔记本电脑”——比;
& lt;李v=" (nb,我)笔记本”比;
& lt; !——nb.txt类似对象访问——比;
& lt; !——v-html=" nb。txt”绑定html代码——比;
& lt; p v-html=" nb.txt "祝辞写日记是一个好习惯& lt;/p>
& lt; div类=癰tn_ground”比;
& lt;按钮@click=皑尅崩嘈?鞍磁ァ崩?癲el左派”祝辞删除& lt;/button>
& lt; !——v-text=" nb。时间”绑定文本等价于{{nb.time}}——比;
& lt;跨类="时间" v-text=皀b.time祝辞& lt;/span>
& lt;按钮@click=案?i)”类型=鞍磁ァ崩?案隆钡脑谛薷? lt;/button>
& lt;/div>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt; footer>
版权所有zk
& lt;/footer>
& lt;脚本src=" https://www.yisu.com/zixun/noteBook.js " type=" text/javascript " charset=皍tf - 8”祝辞& lt;/script>
& lt;/body>
& lt;/html>
CSS代码:
* {
保证金:0;
填充:0;
}
头,#应用,页脚{
保证金:0 8 px;
}
头h2 {
颜色:# FF4500;
粗细:正常;
字体大小:24 px;
padding-top: 10 px;
padding-bottom: 4 px;
边界底部:1 px固体# ccc;
margin-bottom: 4 px;
}
#应用textarea {
宽度:100%;
身高:200 px;
边界:没有;
边界底部:1 px固体# ccc;
填充:8 px 4 px;
}
按钮{
填充:4 px;
background - color: # fff;
边界:1 px固体# ccc;
border - radius: 4 px;
}/*:相对;没有脱离正常流*//* relitive相对于自己在流中的元素定位*//*相对一般用于位置微调,或者让绝对参考自己定位*/#{应用部分
位置:相对;
}
.finish {
位置:绝对的;
background - color: limegreen;
底部:8 px;
右:4 px;
}
#应用ul {
margin-top: 8 px;
}
李#应用{
边界底部:1 px固体# CCCCCC;
margin-bottom: 8 px;
}
.left {
浮:左;
}
铃声{
浮:正确;
}/*组合选择器*/头span.right {
字体大小:14 px;
padding-top: 13 px;
}
.btn_ground {
高度:30 px;
margin-top: 4 px;
}
为. del {
背景颜色:橘红色;
颜色:# FFFFFF;
}
.update {
背景颜色:宝蓝色;
颜色:# FFFFFF;
}
页脚{
颜色:# 999;
text-align:中心;
字体大小:12 px;
}
js代码:
函数getNowString () {
现在var=新的日期()
var arr=(“日”、“一”、“二”、“三”、“四”、“五”、“六”)
返回now.toLocaleDateString ()
+ '星期”
+ arr [now.getDay ())
}
应用var=new Vue ({
埃尔:“#应用”,
数据:{
现在:getNowString (),
笔记本电脑:[
{
时间:“2019/6/17星期一”,
txt:“今天天气不好的
},{
时间:“2019/6/18星期二”,
txt:“今天学习& lt;我在阿迪达斯的
}
]，
日记:”,
指数:' 1 '
}，
方法:{
完成:函数(){//! App.diary是考虑App.diary=null的情况
如果(! App.diary | | 0==App.diary.length)回来
如果(1==App.index) {//存入笔记本中//未插入到数组首位
App.noteBooks.unshift ({
时间:App.now,
txt: App.diary
}）
其他}{//修改
App.noteBooks [App.index]={
时间:App.now,
txt: App.diary
}
App.index=1
}
App.diary="
App.now=getNowString ()
}，
德尔:函数(我){//删除接头(起始下标,删除个数)
App.noteBooks.splice(我,1)
}，
更新:函数(我){
var nb=App.noteBooks[我]
App.diary=nb.txt
App.now=nb.time//应用程序。指数为1表示新增,其他就是修改
App.index=我
}
}
})
