SOURCE

console 命令行工具 X clear

                    
>
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 }