var total = 0;
this.services.forEach(function(s){
if (s.active){
total+= s.price;
}
});
return total;
}
}
});
搜索页面实例
搜索页面
在输入框输入搜索内容，列表显示配置的列表：
![]()
{{article.title}}
var demo = new Vue({
el: '#main',
data: {
searchString: "",
// 数据模型，实际环境你可以根据 Ajax 来获取
articles: [
{
"title": "What You Need To Know About CSS Variables",
"url": "https://www.mscto.com/css/css-tutorial.html",
"image": "https://www.easck.com/d/file/200612/20200612204454712.jpg"
},
{
"title": "Freebie: 4 Great Looking Pricing Tables",
"url": "https://www.mscto.com/html/html-tutorial.html",
"image": "https://www.easck.com/d/file/200612/20200612204504737.jpg"
},
{
"title": "20 Interesting JavaScript and CSS Libraries for February 2016",
"url": "https://www.mscto.com/css3/css3-tutorial.html",
"image": "https://www.easck.com/d/file/200612/20200612204514763.jpg"
},
{
"title": "Quick Tip: The Easiest Way To Make Responsive Headers",
"url": "https://www.mscto.com/css3/css3-tutorial.html",
"image": "https://www.easck.com/d/file/200612/20200612204514763.jpg"
},
{
"title": "Learn SQL In 20 Minutes",
"url": "https://www.mscto.com/sql/sql-tutorial.html",
"image": "https://www.easck.com/d/file/200612/20200612204524787.jpg"
},
{
"title": "Creating Your First Desktop App With HTML, JS and Electron",
"url": "https://www.mscto.com/js/js-tutorial.html",
"image": "https://www.easck.com/d/file/200612/20200612204504737.jpg"
}
] },
computed: {
// 计算数学，匹配搜索
filteredArticles: function () {
var articles_array = this.articles,
searchString = this.searchString;
if(!searchString){
return articles_array;
}
searchString = searchString.trim().toLowerCase();
articles_array = articles_array.filter(function(item){
if(item.title.toLowerCase().indexOf(searchString) !== -1){
return item;
}
})
// 返回过滤后的数据
return articles_array;;
