Question

我在Vue 1.x中有以下内容

rollup-config.js

但是在Vue 2中我试过了：

<tr v-for="product in products">
   <td><img src="{{ product.image_url | thumbnail }}" class="thumbnail"></td>
</tr>

并获得＆＃34;属性或方法＆＃34;缩略图＆＃34;未在实例上定义，但在呈现期间引用。确保在数据选项＆＃34;

中声明反应数据属性

注意：当我将它分配给html元素上的属性时，常规胡须插值过滤器不起作用（即：{{data | filter}}可以作为纯文本正常工作，但在尝试时不能做src =＆＃34; {{data | filter}}＆＃34;。

我尝试了一个计算属性，但它没有作为元素工作我试图获得一个计算值是数组中的每个元素（并且我循环遍历数组中的每个元素）。

所有缩略图都是做一些正则表达式和花哨的文本替换。不确定在vue2中执行此操作的最佳方法。

Answer 1

Vue.js 2.0

过滤器现在只能在文本插值（{{}}标记内）中使用。在过去，我们发现使用带有指令的过滤器（如v-model，v-on等）导致复杂性高于方便性，而对于v-list列表过滤则更适合将此逻辑作为计算属性移动到JavaScript中

使用计算属性：

new Vue({
    el: '#app',
    data: {
        products: [],
    },

    computed: {
        filterProducts() {
            return this.products.filter(function(product) {
                ...
            })
        }
    }
})

Answer 2

Vue.js希望您在模板中使用它们之前定义过滤器。以下是如何定义日期格式过滤器的示例：

// Define the date time format filter
Vue.filter("formatDate", function(date) {
    return moment(date).format("MMMM D, YYYY")
})

完成后，您可以在代码中使用它，如下所示：

<div class="due-date">{{dueDate | formatDate}}</div>

你能告诉我thumbnail过滤器应该做什么吗？对于图像，我不认为您可以在客户端进行任何处理。您可以显示某些预定义大小的缩略图，这是您在CSS中可以执行的操作，而不是使用过滤器。

如何在Vue 2中渲染嵌套元素的过滤器？

2 个答案: