console
var Post = function (title, link, img) {
this.title = title;
this.link = link;
this.img = img;
}
new Vue({
el: '#app',
data: {
keyword: '',
onOff: true,
postList: [
new Post(
'Vue.js',
'https://vuejs.org',
'https://vuejs.org/images/logo.png'
),
new Post(
'React.js',
'https://facebook.github.io/react',
'http://static.open-open.com/news/uploadImg/20150311/20150311144523_348.png'
),
new Post(
'Pusher',
'https://pusher.com',
'https://avatars1.githubusercontent.com/u/739550?v=3&s=400'
),
new Post(
'Feathers.js',
'https://feathersjs.com',
'https://cdn.worldvectorlogo.com/logos/feathersjs.svg'
),
]
},
methods: {
toggleOnOff () {
this.onOff = !this.onOff;
}
},
computed: {
filteredList () {
var keyword = this.keyword;
var postList = this.postList;
return postList.filter(function (post) {
return post.title.toLowerCase().indexOf(keyword.toLowerCase()) != -1;
});
}
}
});
<div id="app">
<div class="box" v-bind:style="{backgroundColor: keyword}" v-bind:class="keyword" v-on:click="toggleOnOff()">
<input type="text" v-model="keyword" placeholder="Serach..."/>
</div>
<ul>
<li v-for="post in filteredList">
<a v-bind:href="post.link" target="_blank">
<span>{{post.title}}</span>
<img v-bind:src="post.img" />
</a>
</li>
</ul>
</div>
* { transition: .5s }
body { color: #000; background: #fff; height: 400px }
.box {
width: 260px;
height: 40px;
border: 1px solid rgba(0,0,0, .1);
margin: 10px 0;
line-height: 40px;
text-align: center;
color: #eee;
border-radius: 6px;
font-size: 12px;
}
.box input {
width: 100%;
height: 100%;
border: 0;
outline: 0;
background: transparent;
padding: 0 10px;
color: #383838;
}
.c-orange { background: #fc0 !important }
.c-blue { background: #0cf !important }
ul { list-style-type: none; padding: 0 }
li { margin: 0; float: left; margin-right: 40px; }
li:last-child { margin: 0 }
li a { display: block; text-decoration: none; padding: 20px; text-align: center }
li a:hover { box-shadow: 0 0 10px rgba(0,0,0, .4); transform: scale(1.1) }
li img { width: 100px }
li span { display: block; color: #383838; padding-bottom: 10px }