vuejs从入门到懵逼 - HTML+Vue+Bootstrap制作搜题页面
Posted Rudon滨海渔村
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vuejs从入门到懵逼 - HTML+Vue+Bootstrap制作搜题页面相关的知识，希望对你有一定的参考价值。
效果图
完整代码
里面有注释，看不懂的翻官方手册 https://cn.vuejs.org/v2/guide/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML+Vue+Bootstrap制作搜题页面 - Rudon</title>
<link href="//lib.sinaapp.com/js/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<style>
/* 自动换行 */
pre
white-space: pre-wrap;
word-wrap: break-word;
/* 手指指 */
.cursorPointer
cursor: pointer;
</style>
</head>
<body>
<div id="vuebox">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Vue搜题
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="nd1" role="button" data-toggle="dropdown">
title_showtype
</a>
<div class="dropdown-menu" aria-labelledby="nd1">
<a class="dropdown-item cursorPointer" @click="show_type = 1">
显示题目+答案
</a>
<a class="dropdown-item cursorPointer" @click="show_type = 0">
只显示题目
</a>
</div>
</li>
</ul>
<div class="form-inline my-2 my-lg-0">
<ul class="navbar-nav">
<li class="nav-item dropdown mr-4">
<a class="nav-link dropdown-toggle" href="#" id="nd2" role="button" data-toggle="dropdown">
title_searchtype
</a>
<div class="dropdown-menu" aria-labelledby="nd2">
<a class="dropdown-item cursorPointer" @click="search_type = 0">
只搜索题目
</a>
<a class="dropdown-item cursorPointer" @click="search_type = 1">
搜索题目+内容
</a>
</div>
</li>
</ul>
<input class="form-control mr-sm-2" type="search" placeholder="搜索关键词" v-model="keyword"/>
</div>
</div>
</nav>
<div class="mt-5">
<!-- 遍历 -->
<div v-for="(item, key) in list" class="mb-4" v-show="showOrNot(key)">
<!-- 使用v-html来显示带HTML标签的文本 -->
<!-- 题目 -->
<div v-html="highlight(key,'title')"></div>
<!-- 答案 -->
<pre v-html="highlight(key,'answer')" v-show="show_type"></pre>
</div>
</div>
</div>
<!-- 隐藏 -->
<div class="d-none">
<!-- 初始化值，不可直接写进v-model的DOM，会被清空掉 -->
<textarea id="init_str">["title":"1\\u3001\\u4e24\\u5bf9\\u2f57\\u2f26\\u53bb\\u4e70\\u5e3d\\u2f26\\uff0c\\u4e3a\\u4ec0\\u4e48\\u53ea\\u4e70\\u4e86\\u4e09\\u9876\\uff1f","answer":"\\u7b54\\u6848\\uff1a\\u4e09\\u4ee3\\u2f08","title":"2\\u3001\\u7814\\u7814\\u2f17\\u56db\\u5c81\\u2f63\\u2f47\\u7684\\u665a\\u4e0a\\uff0c\\u5e86\\u795d\\u5bb4\\u4e0a\\u70b9\\u4e86\\u2f17\\u4e94\\u2f40\\u8721\\u70db\\u3002\\u90a3\\u662f\\u4e3a\\u4ec0\\u4e48\\uff1f","answer":"\\u7b54\\u6848\\uff1a\\u90a3\\u665a\\u505c\\u7535\\uff0c\\u6709\\u2f00\\u53ea\\u662f\\u7167\\u660e\\u8721\\u70db","title":"3\\u3001\\u4f60\\u7238\\u7238\\u548c\\u5988\\u5988\\u2f63\\u4e86\\u4e2a\\u2f09\\u2f26\\uff0c\\u4ed6\\u65e2\\u4e0d\\u662f\\u4f60\\u54e5\\u54e5\\u2f1c\\u4e0d\\u662f\\u4f60\\u5f1f\\u5f1f\\uff0c\\u4ed6\\u662f\\u8c01\\uff1f","answer":"\\u7b54\\u6848\\uff1a\\u662f\\u4f60\\u2f83\\u2f30\\u5440\\u3002","title":"4\\u3001\\u4e2d\\u56fd\\u54ea\\u4e2a\\u5730\\u2f45\\u7684\\u4e1c\\u897f\\u6700\\u4e0d\\u4fbf\\u5b9c\\uff1f","answer":"\\u7b54\\u6848\\uff1a\\u8d35\\u5dde","title":"5\\u3001\\u4e09\\u66f4\\u534a\\u591c\\u56de\\u5bb6\\u624d\\u53d1\\u73b0\\u5fd8\\u8bb0\\u5e26\\u94a5\\u5319,\\u5bb6\\u2fa5\\u2f1c\\u6ca1\\u6709\\u5176\\u4ed6\\u2f08\\u5728,\\u8fd9\\u65f6\\u4f60\\u7684\\u613f\\u671b\\u662f\\u4ec0\\u4e48?","answer":"\\u7b54\\u6848\\uff1a\\u95e8\\u5fd8\\u9501\\u4e86","title":"6\\u3001\\u2f29\\u5f20\\u628a\\u2f00\\u4e2a\\u9e21\\u86cb\\u6254\\u5230\\u2f00\\u2f76\\u4ee5\\u5916\\u7684\\u5730\\u2f45\\u53bb\\uff0c\\u9e21\\u86cb\\u5374\\u6ca1\\u6709\\u7834\\uff0c\\u4e3a\\u4ec0\\u4e48\\uff1f","answer":"\\u7b54\\u6848\\uff1a\\u9e21\\u86cb\\u8fd8\\u6ca1\\u6709\\u843d\\u5730","title":"7\\u3001\\u2f7c\\u5f20\\u6709\\u5f88\\u5389\\u5bb3\\u7684\\u80c3\\u75c5\\uff0c\\u53ef\\u4ed6\\u6bcf\\u5468\\u6709\\u4e94\\u5929\\u603b\\u5f80\\u2f5b\\u79d1\\u8dd1\\uff0c\\u8fd9\\u662f\\u4e3a\\u4ec0\\u4e48\\uff1f","answer":"\\u7b54\\u6848\\uff1a\\u2f7c\\u5f20\\u662f\\u2f5b\\u79d1\\u533b\\u2f63","title":"8\\u3001\\u6709\\u2f0b\\u4e2a\\u82f9\\u679c\\u88c5\\u2f00\\u4e2a\\u7b50\\u2fa5\\uff0c\\u2f0b\\u4e2a\\u2f29\\u5b69\\u6bcf\\u2f08\\u2f00\\u4e2a\\uff0c\\u6700\\u540e\\u2f00\\u770b\\uff0c\\u7b50\\u2fa5\\u8fd8\\u5269\\u4e86\\u2f00\\u4e2a\\uff0c\\u4e3a\\u4ec0\\u4e48\\uff1f","answer":"\\u7b54\\u6848\\uff1a\\u2f00\\u4e2a\\u5b69\\u2f26\\u2f3f\\u2fa5\\u62ff\\u7740\\u7b50","title":"9\\u3001\\u2f00\\u4f4d\\u5988\\u5988\\u6709\\u4e09\\u4e2a\\u5b69\\u2f26\\uff0c\\u4f46\\u5979\\u53ea\\u6709\\u2f00\\u4e2a\\u2f1f\\u2f96\\uff0c\\u5988\\u5988\\u662f\\u600e\\u6837\\u505a\\u5230\\u5bf9\\u4e09\\u4e2a\\u5b69\\u2f26\\u2f00\\u89c6\\u540c\\u4ec1\\u2f1c\\u4e0d\\u5206\\u2f1f\\u2f96\\uff1f","answer":"\\u7b54\\u6848\\uff1a\\u5979\\u628a\\u2f1f\\u2f96\\u57cb\\u5728\\u5730\\u4e0b\\u7b49\\u2f1f\\u2f96\\u2f63\\u4e09\\u4e2a\\u2f29\\u2f1f\\u2f96","title":"10\\u3001\\u2f29\\u660e\\u603b\\u662f\\u559c\\u6b22\\u628a\\u5bb6\\u2fa5\\u7684\\u95f9\\u949f\\u6574\\u574f\\uff0c\\u5988\\u5988\\u4e3a\\u4ec0\\u4e48\\u603b\\u662f\\u8ba9\\u4e0d\\u4f1a\\u4fee\\u7406\\u949f\\u8868\\u7684\\u7238\\u7238\\u4ee3\\u4e3a\\u4fee\\u7406\\uff1f","answer":"\\u7b54\\u6848\\uff1a\\u4fee\\u7406\\u2f29\\u660e","title":"11\\u3001\\u9752\\u6625\\u75d8\\u957f\\u5728\\u54ea\\u2fa5,\\u4f60\\u2f50\\u8f83\\u4e0d\\u62c5\\u2f3c?","answer":"\\u7b54\\u6848\\uff1a\\u522b\\u2f08\\u8138\\u4e0a","title":"12\\u3001\\u2f54\\u4e3a\\u4ec0\\u4e48\\u4e0d\\u80fd\\u6389\\u5728\\u76d8\\u4e0a?","answer":"\\u7b54\\u6848\\uff1a\\u90a3\\u662f\\u952e\\u76d8","title":"13\\u3001\\u6709\\u2f00\\u4e2a\\u72ec\\u2f4a\\u6865\\uff0c\\u6865\\u7684\\u2f00\\u7aef\\u6709\\u2f00\\u53ea\\u2f7c\\u864e\\u51c6\\u5907\\u8fc7\\u6865\\uff0c\\u6865\\u7684\\u53e6\\u2f00\\u7aef\\u6709\\u2f00\\u53ea\\u72fc\\u4e5f\\u51c6\\u5907\\u8fc7\\u6865\\uff0c\\u5728\\u6865\\u4e2d\\u95f4\\u6709\\u2f00\\u53ea\\u2f7a\\u6b63\\u5728\\u8fc7\\u6865\\uff0c\\u2f7a\\u600e\\u4e48\\u8fc7\\u53bb\\u7684\\uff1f","answer":"\\u7b54\\u6848\\uff1a\\u6655\\u8fc7\\u53bb\\u7684","title":"14\\u3001\\u2f29\\u5f20\\u8fdb\\u2f0a\\u5c4b\\u5185\\u4e3a\\u4ec0\\u4e48\\u4e0d\\u968f\\u2f3f\\u5173\\u95e8\\uff1f","answer":"\\u7b54\\u6848\\uff1a\\u2f83\\u52a8\\u95e8","title":"15\\u3001\\u2f64\\u54ea\\u4e09\\u4e2a\\u5b57\\u53ef\\u4ee5\\u56de\\u7b54\\u2f00\\u5207\\u7591\\u95ee\\u9898?","answer":"\\u7b54\\u6848\\uff1a\\u4e0d\\u77e5\\u9053\\n"]</textarea>
<!-- 所有资料的压缩版 -->
<textarea v-model="list_encoded"></textarea>
</div>
</div>
<!-- 不用Bootstrap可以不加载jQuery -->
<script src="//lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.min.js"></script>
<script src="//lib.sinaapp.com/js/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- vue核心库 -->
<script src="//cdn.jsdelivr.net/npm/vue@2"></script>
<script>
// 字符串全部替换 replaceAll
// https://xercis.blog.csdn.net/article/details/106839160
String.prototype.replaceAll = function (s1, s2)
return this.replace(new RegExp(s1, "gm"), s2);
;
</script>
<script>
// 初始化
var app = new Vue(
// 制定某个DOM为vue快乐专区
el: '#vuebox',
// 默认数据
data:
// 搜索关键词
keyword: '',
// 列表 （json加密）
list_encoded: '[]',
list: [],
// 搜索类型 0=title 1=title+answer
search_type: 0,
// 显示类型 0=title 1=title+answer
show_type: 1
,
// onload以后
mounted: function ()
// 转换字符串为数组对象 -- 也可以使用jQuery
this.list_encoded = document.getElementById('init_str').value
// 转换字符串为数组对象
this.list = JSON.parse(this.list_encoded)
,
// 方法
methods:
// 高亮
highlight (k, col)
let c = this.list[k][col]
let kw = this.keyword
if (kw != '')
// 插入高亮标签
c = c.replaceAll(kw, '<font color="red">'+kw+'</font>')
return c
,
// 显示与否
showOrNot (k)
if (this.keyword == '')
return true
let res = false
if (this.search_type)
// 全部搜
if (this.list[k].title.indexOf(this.keyword) !== -1)
res = true
if (!res && this.list[k].answer.indexOf(this.keyword) !== -1)
res = true
return res
else
// title only
if (this.list[k].title.indexOf(this.keyword) !== -1)
res = true
return res
,
// 自动计算出来的值（响应式数据）
computed:
title_showtype : function ()
return (this.show_type)? '显示题目+答案':'只显示题目'
,
title_searchtype : function ()
return (this.search_type)? '搜索题目+内容':'只搜索题目'
)
</script>
</body>
</html>封面
感谢
一 键 生 成 gif 动 态 图 片
在线制作GIF动态图、表情包 - 码工具在线制作GIF动态图，一键生成gif动态图、闪图和搞笑表情包
https://www.matools.com/gif
以上是关于vuejs从入门到懵逼 - HTML+Vue+Bootstrap制作搜题页面的主要内容，如果未能解决你的问题，请参考以下文章