经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vuejs从数组中删除元素的示例代码
来源:jb51  时间:2023/2/2 9:09:12  对本文有异议

Vuejs从数组中删除元素

使用方法:arr.splice(arr.indexOf(ele),length):表示先获取这个数组中这个元素的下标,然后从这个下标开始计算,删除长度为length的元素 这种删除方式适用于任何js数组

eg:

  1. <template>
  2. <div class="users">
  3. <button type="button" class="btn btn-danger" v-on:click="deleteUser(user)"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除</button>
  4. </div>
  5. </template>
  6.  
  7. <script>
  8. //引入jquery
  9.  
  10. export default {
  11.  
  12. data(){
  13. return {
  14. users:[
  15. {
  16. name:'zx',
  17. age:18,
  18. addrress:'江苏南京',
  19. email:'1773203101@qq.com',
  20. contacted:false,
  21. },
  22. {
  23. name:'zhiyi',
  24. age:19,
  25. addrress:'中国北京',
  26. email:'1773203101@qq.com',
  27. contacted:false,
  28. },
  29. {
  30. name:'zhuxu',
  31. age:20,
  32. addrress:'中国上海',
  33. email:'1773203101@qq.com',
  34. contacted:false,
  35. },
  36. ]
  37. }
  38. },
  39. methods:{
  40. deleteUser:function(user){
  41. //表示先获取这个元素的下标,然后从这个下标开始计算,删除长度为1的元素
  42. this.users.splice(this.users.indexOf(user),1);
  43. }
  44. }
  45. };
  46. </script>
  47. <!-- Add "scoped" attribute to limit CSS to this component only -->
  48. <!--scope只会影响到当前组件的样式-->
  49. <style scoped>
  50. </style>

补充:vue 删除数组中的某一条数据

一、删除普通数组

  1. let arr = [1,2,3,4,5];
  2.  
  3. //方法一
  4. let index = arr.indexOf('3');
  5. arr.splice(index, 1)
  6. //打印结果 [1,2,4,5]
  7. //方法二
  8. let index = arr .findIndex(item => {
  9. if (item == '3') {
  10. return true
  11. }
  12. })
  13. arr.splice(index, 1)
  14. //打印结果 [1,2,4,5]

二、删除数组对象

  1. let arr = [
  2. {
  3. id:1,
  4. name:'张三'
  5. },
  6. {
  7. id:2,
  8. name:'李四'
  9. },
  10. {
  11. id:3,
  12. name:'王二'
  13. },
  14. {
  15. id:4,
  16. name:'麻子'
  17. },
  18. ];
  19. let id1 = arr.findIndex(item => {
  20. if (item.id == '3') {
  21. return true
  22. }
  23. })
  24. arr.splice(id1, 1)

三、欢迎添加更多方法,以上是我觉得最简单的方法

到此这篇关于Vuejs从数组中删除元素的文章就介绍到这了,更多相关vue数组中删除元素内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号