vue简易记事本开发详解
更新时间:2021年06月25日 11:29:07 作者:一个爱前端开发的小朋友
这篇文章主要为大家详细介绍了vue简易记事本的开发过程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
本文实例为大家分享了vue实现易记事本的具体代码,供大家参考,具体内容如下
css代码
#todoapp { margin: 0 400px; width: 600px; background-color: gray; text-align: center; } .content { margin:0px 100px; } .todo { margin: 10px; text-align: left; background-color:green; } .btn { float: right; background-color: lawngreen; } .clear{ background-color: lightseagreen; } .list{ margin-left: 10px; }
html代码加js代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/index.css" > <script src="http://9i0i.com/pic.php?p=js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="todoapp"> <div class="header"> <h1>小黑记事本</h1> <input type="text" v-model="inputValue" placeholder="请输入任务"> <button @click="add">添加</button> </div> <div class="content"> <ul class="todolist" v-for="(item,index) in list"> <div class="todo"> <span class="index">{{index+1}}</span><label class="list">{{item}}</label><button class="btn" @click="remove(index)">删除</button> </div> </ul> </div> <div> <button @click="clearBoth" class="clear">全部清除</button> </div> </div> <script> var app = new Vue({ el:"#todoapp", data: { list:["吃饭饭","打游戏","吃西瓜"], inputValue:"" }, methods: { remove:function(index){ this.list.splice(index,1) }, add: function () { this.list.push(this.inputValue) }, clearBoth:function(){ this.list.splice(0,this.list.length) } } }) </script> </body> </html>
运行效果截图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。
相关文章
vant-list组件触发多次onload事件导致数据乱序的解决方案
这篇文章主要介绍了vant-list组件触发多次onload事件导致数据乱序的解决方案2023-01-01Vue-Access-Control 前端用户权限控制解决方案
Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案。这篇文章主要介绍了Vue-Access-Control:前端用户权限控制解决方案,需要的朋友可以参考下2017-12-12Vue路由组件的缓存keep-alive和include属性的具体使用
:浏览器页面在进行切换时,原有的路由组件会被销毁,通过缓存可以保存被切换的路由组件,本文主要介绍了Vue路由组件的缓存keep-alive和include属性的具体使用,感兴趣的可以了解一下2023-11-11
最新评论