黄皮核

注册

 

发新话题 回复该主题

vue简单的搜索小功能 [复制链接]

1#
北京治疗白癜风专科医院 https://jbk.39.net/yiyuanfengcai/yyjs_bjzkbdfyy/

搜索功能是许多产品的核心,例如电商搜索、内容搜索等等。拥有搜索功能,用户可以抓取更多的信息。在一定程度来说,搜索功能也是体现软件的功底是不是够强,也是让用户了解产品的通道,并且是一条快速便捷好用的通道。

文中示例代码介绍的非常详细,具有一定的参考价值

!DOCTYPEhtml

html

head

metacharset="utf-8"

title/title

/head

body

divid="app"

inputtype="text"v-model="keyword"placeholder="输入关键字"/

divclass="list"

divclass="item"v-for="iteminfFruit":key="item"

{{item}}

/div

/div

/div

/body

scriptsrc="js/vue.js"type="text/javascript"charset="utf-8"/script

scripttype="text/javascript"

newVue({

el:"#app",

data(){

return{

keyword:"",

fruit:[

"苹果","沙果","海棠","野樱莓","枇杷","欧楂","山楂","香梨",

"雪梨","温柏","蔷薇果","花楸","杏","樱桃","桃","水蜜桃",

"油桃","蟠桃","李子","梅子","西梅","白玉樱桃","黑莓",

"覆盆子","云莓","罗甘莓","白里叶莓","草莓","菠萝莓","橘子",

"砂糖桔","橙子","柠檬","青柠","柚子","金桔","葡萄柚","香橼",

"佛手","指橙","*皮果","哈密瓜","香瓜","白兰瓜","刺角瓜"

]

}

},

分享 转发
TOP
发新话题 回复该主题