vue做个人页面(vue简易记事本开发详解)
类别:编程学习 浏览量:985
时间:2021-10-22 07:42:12 vue做个人页面
vue简易记事本开发详解本文实例为大家分享了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="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <li id="todoapp"> <li class="header"> <h1>小黑记事本</h1> <input type="text" v-model="inputValue" placeholder="请输入任务"> <button @click="add">添加</button> </li> <li class="content"> <ul class="todolist" v-for="(item,index) in list"> <li class="todo"> <span class="index">{{index+1}}</span><label class="list">{{item}}</label><button class="btn" @click="remove(index)">删除</button> </li> </ul> </li> <li> <button @click="clearBoth" class="clear">全部清除</button> </li> </li> <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>
运行效果截图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vue-cli安装教程学习(Vue新手指南之创建第一个vue-cli脚手架程序)
- vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)
- vue组件keep-alive的原理是什么(如何理解Vue简单状态管理之store模式)
- vue3.0零基础入门(快速掌握Vue3.0中如何上手Vuex状态管理)
- vue调用组件内部的方法(Vue如何实现组件间通信)
- vue计算两个日期差几分钟(vue实现同时设置多个倒计时)
- vue.js入门教学第15讲(Vue.js 使用AntV X6的示例步骤)
- vuejs filter过滤器的使用(Vue过滤器filter实现及应用场景详解)
- vue导出动态的excel功能(vue中如何下载excel流文件及设置下载文件名)
- vue3 兄弟组件(vue3如何按需加载第三方组件库详解)
- vue获取图片并展示(vue卡片式点击切换图片组件使用详解)
- vue浏览pdf文件(如何在vue中使用pdfjs预览pdf文件)
- dockernginx服务器教程(Docker镜像+nginx 部署 vue 项目的方法)
- vue 排班安排(vue实现钉钉的考勤日历)
- vue请求token无效(关于Vue 消除Token过期时刷新页面的重复提示问题)
- 终于来了,淘宝更改账户名测试中,快去看看你能不能修改(淘宝更改账户名测试中)
- 淘宝支持账号名修改,网友 终于可以 重新做人 了(淘宝支持账号名修改)
- 盘点那些年让人称奇的年终奖 最后一个赢辣条毫无悬念(盘点那些年让人称奇的年终奖)
- 你还没有升职吗 他竟因为几套激励理论,升职了(你还没有升职吗)
- 某知名企业绩效管理体系及薪酬分配体系操作手册(某知名企业绩效管理体系及薪酬分配体系操作手册)
- 职场人改不掉这4个习惯,只会越混越穷,一辈子也翻不了身(职场人改不掉这4个习惯)
热门推荐
- js和php加密(RSA实现JS前端加密与PHP后端解密功能示例)
- sqlserver拒绝访问怎么办(SQL server服务显示远程过程调用失败的解决方法)
- 宝塔关闭网站日志(BT宝塔面板下关闭默认404页面方法)
- dedecms如何知道是否授权(DedeCMS Error Warning!提示信息的修改方法)
- mysql8.0.18.0安装详细教程(mysql 8.0.22 下载安装配置方法图文教程)
- react路由组件怎么用(无废话快速上手React路由开发)
- python读写文件实验心得(Python文件读写常见用法总结)
- laravel 获取数据库操作异常(Laravel Eloquent ORM 多条件查询的例子)
- vue怎么实现预览与放大(Vue实现牌面翻转效果)
- sql语句left+join详解(SQL语句中JOIN的用法场景分析)