我正在使用django和vue js。我正在关注vue js的教程，他们使用了vuejs 1，我想使用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>
答案 0 :(得分：1)
您可以创建一个返回已过滤列表的方法。
这是一个例子
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>