http://www.yuyong.net

图文帮你如何使用vue.js中delete方法删除数组中的元素值

电脑现已成为我们工作、生活和娱乐必不可少的工具了,在使用电脑的过程中,可能会遇到如何使用vue.js中delete方法删除数组中的元素值的问题,如果我们遇到了如何使用vue.js中delete方...

电脑现已成为我们工作、生活和娱乐必不可少的工具了,在使用电脑的过程中,可能会遇到如何使用vue.js中delete方法删除数组中的元素值的问题,如果我们遇到了如何使用vue.js中delete方法删除数组中的元素值的情况,该怎么处理怎么才能解决如何使用vue.js中delete方法删除数组中的元素值带来的困扰呢,对于这样的问题其实我们只需要Vue.jsHTML5CSS3JavaScriptHBuilderX浏览器截图工具第一步,在已创建的HTML5页面代码中,引入vue.js文件,并添加vue容器,包含一个无序列表和两个按钮,如下图所示:第二步,在标签内,实例化vue对象,调用el和data,并给message赋值,如下图所示:第三步,保存代码并直接在浏览器中预览效果,可以看到无序列表、删除按钮和添这样就解决了这样的问题,接下来给大家带来如何使用vue.js中delete方法删除数组中的元素值的详细操作步骤。

工具/原料

Vue.js
HTML5
CSS3
JavaScript
HBuilderX
浏览器
截图工具

方法/步骤

第一步,在已创建的HTML5页面代码中,引入vue.js文件,并添加vue容器,包含一个无序列表和两个按钮,如下图所示:

图文帮你如何使用vue.js中delete方法删除数组中的元素值

第二步,在<script></script>标签内,实例化vue对象,调用el和data,并给message赋值,如下图所示:

图文帮你如何使用vue.js中delete方法删除数组中的元素值

第三步,保存代码并直接在浏览器中预览效果,可以看到无序列表、删除按钮和添加按钮,如下图所示:

图文帮你如何使用vue.js中delete方法删除数组中的元素值

第四步,在methods方法中,添加delData和addData点击函数,分别调用Vue.delete()和Vue.set(),如下图所示:

图文帮你如何使用vue.js中delete方法删除数组中的元素值

第五步,再次保存代码并运行,点击删除按钮发现记录无法删除;修改Vue.delete代码,如下图所示:

图文帮你如何使用vue.js中delete方法删除数组中的元素值

第六步,删除方法中的第二个参数是数组的索引,不是元素的key或Value,再次运行可以删除了,如下图所示:

图文帮你如何使用vue.js中delete方法删除数组中的元素值

注意事项

注意vue.js中的Vue.delete()和Vue.set()的用法
注意Vue.delete()和Vue.$delete的区别

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。