vuejs中的过滤器替换2

我正在使用vue js的django。我正在关注vue js的教程，他们使用了vuejs 1，我想使用vuejs 2.vuejs中的过滤器替换2

如何将此语句从vuejs1更改为vuejs2？

v-for=" (story,index) in stories | filterBy 'Alex' in 'writer "

这是我的整个代码。我正在使用django，因此请将大括号替换为[[value]]。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Learning Vue</title> 
    <link href="/static/vendor/bootstrap/css/bootstrap.css" rel="stylesheet"> 

</head> 
<body> 

<div class="container"> 
    <h1>Let's hear some stories!</h1> 
    <div> 
     <h3>Alex's Stories</h3> 
     <ul class="list-group"> 
      <li v-for=" (story,index) in stories | filterBy 'Alex' in 'writer " class="list-group-item"> 
       [[index+1]]. [[ story.writer ]] said "[[ story.plot ]]" 
      </li> 
     </ul> 
    </div> 
    <div> 
     <h3>John's Stories</h3> 
     <ul class="list-group"> 
      <li v-for=" (story,index) in stories | filterBy 'Alex' in 'writer " class="list-group-item"> 
       [[index+1]]. [[ story.writer ]] said "[[ story.plot ]]" 
      </li> 
     </ul> 
    </div> 
    <pre> 
      [[ $data | json ]] 
    </pre> 
</div> 

</body> 





<script src="/static/vendor/vue.js"></script> 
<script> 

    new Vue({ 
     delimiters: ["[[", "]]"], 
     el:'.container', 
     data:{ 
      stories: [ 
       { 
        plot:'I crashed my car today!', 
        writer: 'Alex' 
       }, 
       { 
        plot:'Yesterday,someone stole my bag!', 
        writer:'John' 
       }, 
       { 
        plot: 'Someone ate my chocolate...', 
        writer: 'John' 
       }, 
       { 
        plot: "I ate someone's chocolate!", 
        writer:'Alex' 
       } 
      ] 
     } 
    }) 
</script> 
</html>

来源

2016-11-30 subha.py

您可以创建一个方法来返回已过滤的列表。

下面是一个例子

var app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
     numbers: [ 1, 2, 3, 4, 5 ] 
 
    }, 
 
    methods: { 
 
     even: function (numbers) { 
 
      return numbers.filter(function (number) { 
 
       // your custom logic here 
 
       return number % 2 === 0 
 
      }) 
 
     } 
 
    } 
 
});

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <ul> 
 
    <li v-for="n in even(numbers)">{{ n }}</li> 
 
    </ul> 
 
</div>

来源

2016-11-30 11:41:27

收益号％2 === 0 我想这（2）是动态的，我有什么关系呢？我在这里想要的任何数字，我会这样称呼，“偶数（n，数字，除数）”，这个名字甚至会不合适。但仍然会解决我的问题。 –

您可以将它作为参数传递给您的方法。所以你可以像'myFilter：function（param1，param2）{//我的逻辑与param 1和param2}'一样，然后在模板中用你的值调用它。 –

对不起，你能给我一个片段？ –

vuejs中的过滤器替换2

回答

相关问题