基于Vuejs的搜索匹配功能实现方法
146 浏览量
2020-10-18
17:19:01
上传
评论
收藏 56KB PDF 举报
基于基于Vuejs的搜索匹配功能实现方法的搜索匹配功能实现方法
下面小编就为大家分享一篇基于Vuejs的搜索匹配功能实现方法，具有很好的参考价值，希望对大家有所帮助。
一起跟随小编过来看看吧
最近一直在看vue，查了很多资料，看了很多文档和博客，大概半知半解了，然后利用所理解的知识写了一个简单的搜索匹配
功能。
大概长这个样子：大概长这个样子：
数据都是假的数据都是假的
代码部分代码部分
（注意我引用的是本地vue.min.js文件，请注意文件路径。）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue测试2</title>
<script type="text/javascript" src="vue.min.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
font-size: 14px;
font-family: "微软雅黑";
}
#box{
width: 500px;
height: auto;
border: 1px solid #ccc;
margin: 50px auto;
padding: 10px;
}
.search{
width: 480px;
height: 100px;
text-align: center;
}
.searchBox{
width: 230px;
height: 40px;
outline: none;
text-indent: 10px;
margin-right: 20px;
}
.btn{
width: 100px;
height: 50px;
cursor: pointer;
font-size: 18px;
}
.goodsheet{
width: 500px;
height: auto;
border: 1px solid #eee;
}
.goodsheet tr td,
.goodsheet tr th{
width: 33%;
border: 1px solid #eee;
padding: 5px 10px;
text-align: left;
}
.goodsheet tr th span{
background: #ff9900;
padding: 0 6px;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
资源评论
