SOURCE

console 命令行工具 X clear

                    
>
console
var vm = new Vue({
			el:"#app",			 
			computed:{	
				"fFruit"(){
					// 如果搜索关键字为空,返回所有的水果
					if(this.keyword==""){
						return this.fruit;
					}else{
						// 当fruit里面个某一项文字包含keyword文字那么就把当前数据保留
						// filter过滤,遍历返回为真 保留,为false就过滤掉
						//  includes包含就返回true
						return this.fruit.filter(item=>{
							// indexOf includes包含就返回true
							return item.includes(this.keyword)
						})
					}
				},
			},			 
			data(){
				return {	
					keyword:"",
					fruit:["苹果","沙果","海棠","野樱莓","枇杷","欧楂","山楂","香梨","雪梨 等)","温柏","蔷薇果","花楸","杏","樱桃","桃","水蜜桃","油桃","蟠桃","李子","梅子(青梅)","西梅","白玉樱桃 ","黑莓","覆盆子","云莓","罗甘莓","白里叶莓","草莓","菠萝莓","橘子","砂糖桔","橙子","柠檬","青柠","柚子","金桔","葡萄柚","香橼","佛手","指橙","黄皮果","哈密瓜","香瓜","白兰瓜","刺角瓜"]
				} 
			}
		})
<div id="app">
			<input type="text" v-model="keyword" placeholder="输入关键字">
			<div class="list">
				<div class="item" v-for="item in fFruit" :key="item">
					{{item}}
				</div>
			</div>
		</div>

本项目引用的自定义外部资源