好空间网络 下载源码 Vue.js实现表格动态增加删除的方法（附源码下载）(4)

删除例子

1.创建Ionic2应用

通过以下命令行语句创建新的Ionic2应用：

这里我使用了–v2标志位，为了告诉Ionic命令行我们创建的是Ionic2项目。

2.准备列表数据

我们需要一些维护数据，因此要建立一些试验数据。创建我们项目的blank模版默认建立了一个Home组件，这个教程我们就在此基础上修改。

既然Ionic2还很新，我将这些步骤尽量阐述详细，下面我们看看app/home/home.js文件：

constructor 方法在组件创建是执行，因此我们在这里准备试验数据。你可能已经注意到我们已经给这个组件定义了模版，随后将展示如何在模版中使用在这里添加的数据。

home.js 文件修改如下：

现在我们有一些数据可以删除了。

3.修改主页（HOME）的模版

修改 home.html如下：

这只是创建了只有一个单项的列表，接着我们将添加滑动元素。

继续修改home.html如下：

通过上下对比，你应该看到：我们用ion-item-sliding替换了ion-item 。这允许我们创建一个ion-item-options 部件，当用户滑动列表元素时，它将显示出来。

这段代码还创建了一个删除按钮，当ion-item-options部件显示出来时，可以点击按钮，这时会触发类中定义的removeItem （暂无，接下来添加）。另外，我们不止是一个单项，我们要为我们创建的数组的每一个数据创建滑动项，这里我使用ng-for。

还是修改home.html如下：

现在我们循环在类中定义的items数组的每个item项，然后为每个项创建一个 ion-item-sliding指令。注意我们使用的是#item而不是item。这将创建一个本地引用到迭代获得的item，这让我们可以使用 { {item.title} } 输出标题，它还允许我们传递item的引用到我们的 removeItem 函数。

我们现在有了一个列表包含所有数据，用户可以滑动并显示出一个delete按钮。现在剩下的是当用户点击时做点什么事。因此我们设置一个简单以便调用方法从我们先前创建的测试数据中删除一项。

4.创建方法删除数据

修改 home.js 如下：

现在你向左侧滑动列表项，然后点击删除按钮，它就会从列表中删除。就像下面这样：

删除例子

现在滑动时你有两个按钮了，看下面：

然后你可以编写Edit按钮的点击事件了，具体取决于你的需求。

总结

Ionic2 这个特性真是太棒了，不仅能删除，还能轻易的添加其它按钮。

这同时也是一个非常完美的UI元素节省屏幕空间，不会显示这些信息除非你滑动屏幕。

Vue.js学习之过滤器详解

[8427]

前言

在这个教程中，我们将会通过几个例子，了解和学习VueJs的过滤器。阅读这这篇文中的前提是你对Vue已经有了基本的语法基础。

Vue.Js中的过滤器基础

过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器，可以参考官方文档， #过滤器 ，过滤器通常会使用管道标志 “ | ”， 比如：

uppercase过滤器 : 将输入的字符串转换成大写字母的过滤器。

VueJs允许你链式调用过滤器，简单的来说，就是一个过滤器的输出成为下一个过滤器的输入，然后再次过滤。接下来，我们可以想象一个比较简单的例子，使用了Vue的 filterBy + orderBy 过滤器来过滤所有商品products。过滤出来的产品是属于水果类商品。

filterBy过滤器 : 过滤器的值必须是一个数组，filterBy + 过滤条件。过滤条件是：'string || function'+ in 'optionKeyName'

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/tongxinshuyu/article-84997-4.html