Vue实现简易备忘录

简介：本文旨在结合具体项目，让用户学会vue的button组件与个事件怎么结合。

初始代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例备忘录</title><script src="../js/vue.js"></script>
</head>
<body><div id="app"><!-- 通过ref获取input中的内容 --><!-- 请输入内容:<input type="text" ref="textvalue"><button @click="saveItem()">添加到备忘录</button><br> --><!-- 通过v-model实现上面的功能 -->请输入内容:<input type="text" v-model="textvalue"><button @click="saveItem()">添加到备忘录</button><br><ul><li v-for="(content, index) in lists" :key="index">{{index + 1}}. {{content}}<a href="javascript:;" @click="deleteItem(index)">删除</a></li>            </ul><a href="javascript:;" @click="clearAll()">清空备忘录</a><h3>当前备忘录3条</h3></div>
</body><script>const app = new Vue({el:"#app",data:{lists:["今天上午交报名费","晚上要复习高等数学","后天有培训"] // 这个数组没有value值},methods:{}});</script>
</html>

设计要求：
在methods中添加三个方法，分别完成如下功能：

点击”添加到备忘录“按钮，能够将文本框中输入的项目添加到列表。方法名：saveItem()

提示：这需要给这个按钮添加绑定一个单击事件。在此事件的处理函数中需要将文本框
的value交给v-model处理。同时思考如何用Javascript对数组进行增加和删除元素操作。

点击列表中项目名称后的”删除“，能够将此条目删除掉。方法名：deleteItem()
提示：将v-for的index传递给你所写的删除函数，这样就得到了要删除的那个元素的index。
点击”清除备忘录“，列表中的所有条目都被删除掉。方法名：clearAll()

随着添加或删除操作，显示的总条数能够随之变化。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>案例备忘录</title><script src="../js/vue.js"></script>
</head>
<body><div id="app"><!-- 通过ref获取input中的内容 --><!-- 请输入内容:<input type="text" ref="textvalue"><button @click="saveItem()">添加到备忘录</button><br> --><!-- 通过v-model实现上面的功能 -->请输入内容:<input type="text" v-model="textvalue"><button @click="saveItem()">添加到备忘录</button><br><ul><li v-for="(content, index) in lists" :key="index">{{index + 1}}. {{content}}<a href="javascript:;" @click="deleteItem(index)">删除</a></li>            </ul><a href="javascript:;" @click="clearAll()">清空备忘录</a><h3>当前备忘录{{lists.length}}条</h3></div>
</body><script>const app = new Vue({el:"#app",data:{lists:["今天上午交报名费","晚上要复习高等数学","后天有培训"] // 这个数组没有value值},methods:{saveItem(){// 通过ref实现获取input中的内容// this.lists.push(this.$refs.textvalue.value)// 通过v-model实现获取input中的内容this.lists.push(this.textvalue)},deleteItem(index){this.lists.splice(index, 1);},clearAll(){this.lists.splice(0, this.lists.length)}}});</script>
</html>

Vue实现简易备忘录相关推荐

基于vue开发简易备忘录，实现列表增删
示例代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
vue实现文件上传功能
代码如下所示: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
win10 4步快速安装vue
1 安装nvm-windows 在这里下载安装nvm,目的是在同一台电脑中管理多个 Node 版本建议采取默认安装路径安装 2 安装nodejs 以管理员模式打开命令行,然后输入 nvm list ...
前端Vue学习之路(五)插件的使用
vant插件使用这里我们是用的语法是vue2.0 所以是 npm i vant -S 用法 1.按需引入的话找到package.json文件添加以下内容 plugins:[['import', ...
前端Vue学习之路(四)axios请求数据
axios 1.增加新知识 2.旧方案 3.新方案(一) 4.为什么要用拦截器 (新方案二) 1.增加新知识假如每个组件都引用axios,后期如果axios库不再维护了,那每个组件都要改动所以封装 ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...
前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言先安装node.js环境 ...
Vue 自定义权限指令
前述虽然VUE 定义了一些常用的指令,例如v-on.v-bind等,但是在我们实际开发的时候,还是会自己定义一些指令用于适应我们自己的业务. 实现这里由于我的项目做了动态权限,页面的按钮也需要根据 ...

Vue实现简易备忘录

Vue实现简易备忘录相关推荐

最新文章

热门文章