vue向list中添加数据_vue.js实战---添加/删除数据

于 2021-01-16 01:17:22 发布
阅读量2.1k 收藏
点赞数
文章标签： vue向list中添加数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_32188111/article/details/112998516
版权
这篇博客展示了如何使用Vue.js实现一个简单的任务列表应用，包括动态添加和删除任务的功能。通过v-model和v-on:keyup.enter指令添加任务，利用this.list.push向数据列表中插入新任务，并在添加后清空输入框。同时，文章提到了如何使用v-for循环遍历任务列表，以及v-if或v-show控制任务显示状态，结合checkbox的双向数据绑定实现任务的勾选状态。代码中还包含了一些CSS样式用于美化界面。
摘要由CSDN通过智能技术生成

vue.js简单实现的页面添加数据，删除数据的效果，效果如下图

ab742c7f8658?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

demo.gif

代码：

实战

任务列表

添加任务：

v-model="todo"

v-on:keyup.enter="addTode">

还没有添加任何任务

  • { {item.title}}

最低0.47元/天 解锁文章
炙炙牛
关注
Vue.js3学习篇--Vue模板应用
小马哥的博客
10-02 964
本质上，Vue中的模板指令也是HTML属性标签，其通常由前缀“v-”开头，例如之前看到的v-on，v-html，v-bind等。v-on:click。
Vue基本知识熟知
qq_55293923的博客
05-03 387
Vue 第一个Vue程序 1.在idea中下载vue插件 2.新建一个html文件导入Vue.js <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script> //官网中有具体新版本，可自行去查询 3.写下如下程序 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
Vue 实现列表动态添加和删除的两种方法小结
10-18
今天小编就为大家分享一篇Vue 实现列表动态添加和删除的两种方法小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue入门02-vue实现ToDoList
Sophie_U的博客
02-06 606
一、需求与准备1、准备 使用bootstrap实现页面的基础样式（依赖jquery），使用vue实现功能需要 2、功能需求： 1）、表单实现输入任务清单后加入到展示项中 2）、点击删除按钮弹出警告框询问是否删除（bootstarp模态框插件） 3)、确定删除时，删除对应项（单项删除，全部删除） 4）、任务列表为空时，显示“数据为空” v-show 二、实例1、静态页
vue基础：将表单中的数据按列表显示在页面下，删除数据this.list.push(***)，this.list.push(***)。
谷咕咕
01-20 9314
将表单中的数据按列表显示在页面下，删除数据 1.添加数据 1.在页面中，首先通过数据的双向绑定，表单中的v-model=“todo”，绑定数据。 2.通过调用@click="doadd()"方法中的this.list.push(this.todo)，将todo中的数据加到list中。 3.通过循环列表显示。 &lt;template&gt; &lt;div id="app"&gt; ...
C++/C分别使用new创建动态二维数组，用vector创建二维数组，初始化并打印（行和列可以根据输入调整，包含简单例子）
IT猿手
12-01 792
new方法创建动态二维数组，vector创建动态二维数组 #include<iostream> #include<vector> using namespace std; void main() { int n ; int m ; printf("input:\n"); scanf_s("%d,%d", &n,&m);//输入行和列 printf("使用new创建动态数组：\n"); int** p = new int* [n];//首先创建n行的数组
vue 数组添加数据
热门推荐
Now_li的博客
12-08 6万+
vue 数据添加分为三种方法：1.unshift()，2.push(),3.splice() <template> <div> <ul> <li v-for="(time,index) of listTable" :key="index" @click="copyNew(time,index)"> {{time.id}}{{time.name1}}{{time.name2}} 添加 </li> </u
Book_Library_Vue.js
03-20
《Vue.js实战：构建Book Library应用》 在IT行业中，前端框架的发展日新月异，Vue.js作为一款轻量级且功能强大的JavaScript框架，已经深受开发者喜爱。本项目"Book_Library_Vue.js"旨在利用Vue.js技术栈构建一个...
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
最新发布
11-07
在本项目中，我们探索了如何使用最新技术栈进行全栈开发，重点是前端的Vite3、Vue3、TypeScript以及Ant Design Vue3的整合，同时涉及后端的SpringBoot、MybatisPlus和MySQL。这是一个全面的实战教程，旨在帮助开发者...
awesome-vue-3：与Vue 3相关的精选精彩清单
02-06
Vue.js 是一款流行的前端JavaScript框架，用于构建用户界面。Vue 3是其最新版本，带来了许多性能提升、新特性和优化。"awesome-vue-3" 是一个专门为Vue 3整理的资源集合，包含了各种工具、库、教程、指南和其他与Vue...
spark SQL入门指南《读书笔记》
Tesi1a的充电桩
10-06 799
spark SQL入门指南 第一章 ETL （数据仓库技术） ETL，是英文Extract-Transform-Load的缩写，用来描述将数据从来源端经过抽取（extract）、转换（transform）、加载（load）至目的端的过程。ETL一词较常用在数据仓库，但其对象并不限于数据仓库。 ...
vue向数组中动态添加数据 （日常记录）
岁末zzz的博客
05-09 3万+
vue中数据更新通过v-model实现，向数组中添加数据通过push()实现，向shortcuts数组中动态添加newShortcut对象中的title和action b.forEach((res)=>{ this.a.push({ title: res.title, action:res.action }); }) ...
vue向list中添加数据_vue 总结 （ 修改，添加，删除list中的数据）
weixin_39671621的博客
12-21 6162
var vm=new Vue({el:'#app',data:{id:'1',name:'',soso:'',list:[{"id":1,"name":"大黄蜂","time":new Date()},{"id":2,"name":"奔驰","time":new Date()}]},methods:{add:function(){this.list.push({"id":this.id,"name...
16. Vue 常用列表操作实例 - 增加列表数据
DevOps海洋的渔夫@专栏
03-08 3705
需求 在前端开发中，对于列表的操作是最常见的，例如：增加列表数据、删除列表数据、查询列表的关键字等等。 本篇章主要构建页面内容，以及增加列表数据。 构建列表示例页面 使用Bootstrap 4简单写一个列表以及相关查询条件。 <!DOCTYPE html> <html lang="en"> <head> <meta charset=...
vue设置列表数据添加
LuiChun
11-25 2522
<template> <div> <div> <fieldset> <legend>练习</legend> <div> <span>姓名:</span> <input type="text" placeholder="名字" v-model="newPerson.name" /> .
vue v-for及对数据的 push 操作
guohao326的博客
09-17 2万+
template> div class="hello"> div class="top">这里是首页div> button @click="addItem">增加button> ul> li v-for="g in list"> span>{{g.mm}}span>** span>{{g.price}}span>
JS数组添加元素的三种方式
weixin_30436891的博客
01-25 1万+
1、push() 结尾添加 　　数组.push(元素) 参数描述 newelement1 必需。要添加到数组的第一个元素。 newelement2 可选。要添加到数组的第二个元素。 newelementX 可选。可添加多个元素。 2、unshift() 头部添加 　　数组.unshift(元素) 参数描述 neweleme...
list vue 添加数据方法_详解vue 实例方法和数据
weixin_39555951的博客
12-23 827
1.vm.$set问题描述:如何在不通过循环数据给list数据添加一个showmore属性，并且在morefun中改变这个新增属性的值，并实现双向绑定？{{v.name}}展示更多export default {name: 'app',data() {return {list: [{name: '小颖'}, {name: '仔仔'}, {name: '黑妞'}, {name: '土豆'}]}},m...
vue2.0实现列表数据的增加和删除
yw00yw的博客
07-23 8481
css &lt;style&gt; [v-cloak]{ display: none; } table{ width: 800px; border-collapse: collapse; margin: 20px auto; } table th,table td{ backg...
Vue-cli项目中Mock.js实战：快速模拟后端数据
Mock.js是一款强大的JavaScript库，它允许前端开发者模拟后端API的行为，提供伪造数据，以便在开发过程中无需等待真实接口的返回。以下是关于在Vue项目中集成和使用Mock.js的详细步骤和关键概念： 1. **环境准备**:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值