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

回答

相關問題