vue向list中添加数据_vue2.0实现列表数据增加和删除

本文展示了如何在Vue2.0中实现列表数据的添加和删除功能,提供了一段包含HTML、CSS和JavaScript的完整代码示例。通过`v-cloak`指令、`data`属性和`methods`中的`addData`、`delData`方法,实现了列表项的动态管理。在添加数据后会清空输入框,删除数据则需要用户确认。
摘要由CSDN通过智能技术生成

本文实例为大家分享了vue2.0实现列表数据增加和删除的具体代码,供大家参考,具体内容如下

css

[v-cloak]{

display: none;

}

table{

width: 800px;

border-collapse: collapse;

margin: 20px auto;

}

table th,table td{

background: #0094ff;

color: white;

font-size: 16px;

padding: 5px;

text-align: center;

border: 1px solid black;

}

table td{

background: #fff;

color: red;

}

html

添加

编号 名称 创建时间 操作
当前列表无数据
{ {item.id}} { {item.pname}} { {item.ctime}}

删除

js

var vm = new Vue({

el: '#app',</

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2.0 ,我们可以使用计算属性和过滤器来实现列表的过滤功能。 首先,在模板使用 v-for 指令循环渲染列表,然后通过计算属性或者过滤器来对列表进行过滤。 以下是一个例子: ```html <template> <div> <input type="text" v-model="keyword" placeholder="输入关键词进行搜索"> <ul> <li v-for="item in filteredList">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { list: ['apple', 'banana', 'orange', 'peach'], keyword: '' } }, computed: { filteredList() { const keyword = this.keyword.trim().toLowerCase() if (!keyword) { return this.list } return this.list.filter(item => item.toLowerCase().indexOf(keyword) !== -1) } } } </script> ``` 在上面的代码,我们定义了一个列表 `list` 和一个输入框 `keyword`,然后使用 v-for 指令循环渲染列表。 在 computed 计算属性,我们定义了一个名为 `filteredList` 的计算属性,它根据输入框的关键词对列表进行过滤。如果输入框没有输入关键词,则返回原始的列表;否则,使用 `filter` 方法对列表进行过滤,将符合条件的列表项返回。 在模板,我们使用 `{{ item }}` 渲染每个列表项,但是我们使用的是 `filteredList` 计算属性,因此只会渲染符合过滤条件的列表项。 如果你想使用过滤器来实现列表过滤,可以将上面的 `filteredList` 计算属性改为一个过滤器: ```javascript filters: { filterList(list, keyword) { keyword = keyword.trim().toLowerCase() if (!keyword) { return list } return list.filter(item => item.toLowerCase().indexOf(keyword) !== -1) } } ``` 然后在模板使用管道符 `|` 调用过滤器: ```html <li v-for="item in list | filterList(keyword)">{{ item }}</li> ``` 这样就可以实现列表的过滤功能了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值