Vue implements search list content
This time I will bring you vue to implement search list content. What are the precautions for vue to implement search list content? The following is a practical case, let's take a look.
The rendering is as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>无标题页</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0">
<script src="/style/js/vue.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.17/vue-resource.js"></script>
<style>
.box {
width: 900px;
height: auto;
overflow: hidden;
margin: 30px auto;
}
.left {
height: 150px;
width: 185px;
padding: 5px;
display: inline-block;
border: 1px solid black;
}
.left input {
padding: 2px;
margin-top: 10px;
}
.right {
width: 600px;
height: auto;
display: inline-block;
margin-left: 30px;
vertical-align: top;
}
.right table {
border-collapse: collapse;
width: 580px;
}
.right table th {
background-color: green;
padding: 5px;
text-align: center;
border: 1px solid black;
color: #FFFFFF;
}
.right table tr {
text-align: center;
}
.right table td {
border: 1px solid black;
}
</style>
</head>
<body>
<p id="app">
<p class="box">
<p class="left">
<input type="text" placeholder="输入编号" v-model="id" />
<input type="text" placeholder="输入名称" v-model="name" /><br />
<input type="button" value="添加数据" @click="add" />
<input type="text" placeholder="搜索数据" v-model="search" />
</p>
<p class="right">
<table>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创建时间</th>
<th>操作</th>
</tr>
<tr v-for="item in searchData">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.time | datefmt('yyyy-mm-dd HH:mm:ss')}}</td>
<td>
<a href="javascript:void(0)" rel="external nofollow" @click="del(item.id)">删除</a>
</td>
</tr>
</table>
</p>
</p>
</p>
<script>
//定义全局过滤器
Vue.filter("datefmt", function (input, formatstring) {
var result = "";
var year = input.getFullYear();
var month = input.getMonth() + 1;
var day = input.getDate();
var hour = input.getHours();
hour = hour < 10 ? "0" + hour : hour;
var minute = input.getMinutes();
minute = minute < 10 ? "0" + minute : minute;
if (formatstring == 'yyyy-mm-dd') {
result = year + "-" + month + "-" + day;
} else {
result = year + "-" + month + "-" + day + " " + hour + ":" + minute;
}
return result;
})
var TEMPLATE={
options:function(){
/**
<a class="weui_cell" href="javascript:void(0);" rel="external nofollow" >
<p class=weui_cell_hd >
<i class="fa fa-credit-card fa-2x icon-color" style=width:35px;margin-right:15px;display:block ></i>
</p>
<p class="weui_cell_bd weui_cell_primary" >
<p > {{HospPatientName}}
<span style=margin-left:15px class=blue_tag >{{HospCardType}}</p>
<p >{{HospCardNo}}</p></p>
<p class=weui_cell_ft >
{{HospIsDefault}}
</p>
</a>
*/
}
};
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
search: '',
list: [{
"id": 1,
"name": "宝马",
"time": new Date()
},
{
"id": 2,
"name": "奔驰",
"time": new Date()
}
]
},
methods: {
del: function (id) {
if (!confirm("是否删除数据？")) {
return;
}
//调用list.findIndex()方法，根据传入的id获取到这个要删除数据的索引值
var index = this.list.findIndex(function (item) {
return item.id == id;
});
//调用list.splice(删除的索引，删除的元素个数)
this.list.splice(index, 1);
},
add: function () {
//包装成list要求的对象
var tem = {
id: this.id,
name: this.name,
time: new Date()
};
//将tem追加到list数组中
this.list.push(tem);
//清空页面上的文本框中的数据
this.id = "";
this.name = "";
}
},
computed: {
searchData: function () {
var search = this.search;
if (search) {
return this.list.filter(function (name) {
return Object.keys(name).some(function (key) {
return String(name[key]).toLowerCase().indexOf(search) > -1
})
})
}
return this.list;
}
}
})
</script>
</body>
</html>vue-router usage summary (with code)
axios post method detailed steps to submit formdata
The above is the detailed content of Vue implements search list content. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to count the number of elements in a list using Python's count() function
Nov 18, 2023 pm 02:53 PM
How to use Python's count() function to calculate the number of an element in a list requires specific code examples. As a powerful and easy-to-learn programming language, Python provides many built-in functions to handle different data structures. One of them is the count() function, which can be used to count the number of elements in a list. In this article, we will explain how to use the count() function in detail and provide specific code examples. The count() function is a built-in function of Python, used to calculate a certain
How to change the Microsoft Edge browser to open with 360 navigation - How to change the opening with 360 navigation
Mar 04, 2024 pm 01:50 PM
How to change the page that opens the Microsoft Edge browser to 360 navigation? It is actually very simple, so now I will share with you the method of changing the page that opens the Microsoft Edge browser to 360 navigation. Friends in need can take a look. I hope Can help everyone. Open the Microsoft Edge browser. We see a page like the one below. Click the three-dot icon in the upper right corner. Click "Settings." Click "On startup" in the left column of the settings page. Click on the three points shown in the picture in the right column (do not click "Open New Tab"), then click Edit and change the URL to "0" (or other meaningless numbers). Then click "Save". Next, select "
How to search for users in Xianyu
Feb 24, 2024 am 11:25 AM
How does Xianyu search for users? In the software Xianyu, we can directly find the users we want to communicate with in the software. But I don’t know how to search for users. Just view it among the users after searching. Next is the introduction that the editor brings to users about how to search for users. If you are interested, come and take a look! How to search for users in Xianyu? Answer: View details among the searched users. Introduction: 1. Enter the software and click on the search box. 2. Enter the user name and click Search. 3. Select [User] under the search box to find the corresponding user.
How to use Baidu advanced search
Feb 22, 2024 am 11:09 AM
How to use Baidu Advanced Search Baidu search engine is currently one of the most commonly used search engines in China. It provides a wealth of search functions, one of which is advanced search. Advanced search can help users search for the information they need more accurately and improve search efficiency. So, how to use Baidu advanced search? The first step is to open the Baidu search engine homepage. First, we need to open Baidu’s official website, which is www.baidu.com. This is the entrance to Baidu search. In the second step, click the Advanced Search button. On the right side of the Baidu search box, there is
WPS table cannot find the data you are searching for, please check the search option location
Mar 19, 2024 pm 10:13 PM
In the era dominated by intelligence, office software has also become popular, and Wps forms are adopted by the majority of office workers due to their flexibility. At work, we are required not only to learn simple form making and text entry, but also to master more operational skills in order to complete the tasks in actual work. Reports with data and using forms are more convenient, clear and accurate. The lesson we bring to you today is: The WPS table cannot find the data you are searching for. Why please check the search option location? 1. First select the Excel table and double-click to open it. Then in this interface, select all cells. 2. Then in this interface, click the "Edit" option in "File" in the top toolbar. 3. Secondly, in this interface, click "
How to search for stores on mobile Taobao How to search for store names
Mar 13, 2024 am 11:00 AM
The mobile Taobao app software provides a lot of good products. You can buy them anytime and anywhere, and everything is genuine. The price tag of each product is clear. There are no complicated operations at all, making you enjoy more convenient shopping. . You can search and purchase freely as you like. The product sections of different categories are all open. Add your personal delivery address and contact number to facilitate the courier company to contact you, and check the latest logistics trends in real time. Then some new users are using it for the first time. If you don’t know how to search for products, of course you only need to enter keywords in the search bar to find all the product results. You can’t stop shopping freely. Now the editor will provide detailed online methods for mobile Taobao users to search for store names. 1. First open the Taobao app on your mobile phone,
How to create a grocery list: Use the Reminders app for iPhone
Dec 01, 2023 pm 03:37 PM
In iOS 17, Apple added a handy little list feature to the Reminders app to help you when you're out shopping for groceries. Read on to learn how to use it and shorten your trip to the store. When you create a list using the new "Grocery" list type (named "Shopping" outside the US), you can enter a variety of food and groceries and have them automatically organized by category. This organization makes it easier to find what you need at the grocery store or while out shopping. Category types available in alerts include Produce, Bread & Cereals, Frozen Foods, Snacks & Candy, Meat, Dairy, Eggs & Cheese, Baked Goods, Baked Goods, Household Products, Personal Care & Wellness, and Wine, Beer & Spirits . The following is created in iOS17
What is the Excel search shortcut key?
Mar 20, 2024 am 10:52 AM
Want to know what the Excel search shortcut key is? The answer is simple, just use [Ctrl+F] to perform a quick search. We often use Excel to record a lot of different data and names. If we need to change it, it will be inconvenient for us to search because there is too much data, and it will be quite troublesome to search. In fact, we can use a quick search shortcut to find the data we need to change! So, what is the search shortcut key in Excel? Today I’m going to teach you how to use the shortcut search keys in excel tables to save you time and effort in your work. Here I am using this version of Microsoft Office excel 2010 for demonstration. Students who need it can
