首页 > 编程语言 >直播平台源码,vue 写搜索效果

直播平台源码,vue 写搜索效果

时间:2022-11-15 14:11:06浏览次数:40  
标签:vue return keyword 直播 搜索 源码

直播平台源码,vue 写搜索效果

代码如下

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h1>搜索水果</h1>
<input type="text" v-model="keyword">
<div v-for="(item,index) in filst" :key="index">{{item}}</div>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
computed: {
filst() {
if (this.keyword.trim() === "") {
return this.list;
} else {
var a = this.list.filter(item => {
if (item.indexOf(this.keyword) != -1) {
return true;
} else {
return false;
}
})
return a;
}
}
},
data() {
return {
keyword: "",
]
}
}
 
})
</script>
</html>

以上就是 直播平台源码,vue 写搜索效果,更多内容欢迎关注之后的文章

 

标签:vue,return,keyword,直播,搜索,源码
From: https://www.cnblogs.com/yunbaomengnan/p/16892240.html

相关文章

  • electron vue3 项目搭建
    electronvue3项目搭建一.vue项目搭建安装electron需要搭建vue项目,这里用的vue3项目。1.安装下载node 这里用的16版本https://nodejs.org/zh-cn/2.设置淘宝镜像......
  • 解决 vue 项目一直出现 sockjs-node/info?t=1554978**** ,并造成浏览器不能及时更新编
    首先sockjs-node是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。服务端:sockjs-node(https://github.com/......
  • 解决 vue 项目一直出现 sockjs-node/info?t=1554978****问题【转载】
    首先先上图 看到很多人都是这么干的:1.找到/node_modules/sockjs-client/dist/sockjs.js2.找到代码的1605行try{//self.xhr.send(payload);把这......
  • unplugin-vue-components(按需加载使用的组件)
    作用unplugin-vue-components是由vite-plugin-components重名而来,可以将项目中的组件按需引用,仅注册你使用的组件。//平时我们在页面使用组件<template> <comp/></t......
  • vue+echarts绘制地图
    代码实现importchinaJsonfrom'echarts/map/json/china.json'exportdefault{mounted(){letmyChart=this.$echarts.init(document.getElementById("......
  • vue-plugin-Pages自动配置路由
    vite-plugin-pages使用安装首先先安装依赖。因为模版里自带了vue-router,所以不需要再安装。cnpmaddvite-plugin-pagesvite-plugin-vue-layouts-D在vite.config......
  • vue3 获取组件实例 $ref方法踩坑 getCurrentInstance()
    ps:我使用的是element-plus框架,有一个需求是级联选择器,选择后需要获取最后的id和label一起传递给后端。获取id比较简单在change事件中使用value.pop()就可以获得但是获取......
  • Vue3+Vite简单使用
    前言Vue3大势不可阻挡,与之而来的就是Vite,尤雨溪极力推荐的前端开发与构建工具vue3原生支持TS,所以TS语法和vue3TS语法学起来vue中的vuex状态管理也用不顺手,看不顺......
  • Vue使用axios请求
    新建组件(局部引入):<template><div><p>{{msg}}</p></div></template><script>importaxiosfrom'axios';importQueryStringfrom'qs';exportde......
  • vue+element实现拖拽分屏
    实现效果:使用鼠标点击分割线拖动,可实现左右展示框宽度(也可修改为高度)的变化,如下图1、封装组件首先需要封装按钮点击的这条线,计算鼠标点击后滑动的距离:<template><di......