-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfiltroBusqueda.html
72 lines (65 loc) · 2.57 KB
/
filtroBusqueda.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximun-scale=1, minimun-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Filtros de Búsqueda</title>
</head>
<body>
<main id="app">
<input type="text" placeholder="Buscador" size="50" v-model="buscar"><br><br>
<table>
<th v-for="campo in campos">{{campo | capitalize}}</th>
<tr v-for="item in datosFiltrados">
<td>{{item.name.toUpperCase()}}</td> <!-- Sintaxis vieja {{item.name | upperCase}} -->
<td>{{item.email.toLowerCase()}}</td>
<td>{{item.address.city}}</td>
<td>Lat: {{item.address.geo.lat}} Long: {{item.address.geo.lng}}</td>
<td>{{'$' + precio.toFixed(2)}}</td>
<td>{{texto | verMas(15,' ver más...') | capitalize}}</td>
</tr>
</table>
</main>
<script src="vueJS/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.5.1/vue-resource.min.js"></script>
<script>
Vue.filter('capitalize',function(valor){
return valor[0].toUpperCase() + valor.slice(1)
})
Vue.filter('verMas',function(valor, tamano,sufijo){
return valor.substring(0,tamano) + sufijo
})
const url = 'https://jsonplaceholder.typicode.com/users'
const app = new Vue({
el:'#app',
data:{
datos: [],
campos: ['nombre','email','ciudad','localización','precio'],
precio: 132,
texto: 'lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam provident qui amet molestias sit possimus repellat labore deleniti aliquam laboriosam iusto corrupti quidem ullam commodi ex est, consequuntur quibusdam quae! Sed cum saepe possimus, vero mollitia nulla ex placeat aspernatur veniam laborum nihil voluptatem exercitationem! Ratione voluptas non fuga animi.',
buscar: ''
},
created(){
this.usuarios()
},
methods:{
usuarios(){
this.$http.get(url)
.then(function(respuesta){
this.datos = respuesta.data
})
}
},
computed:{
datosFiltrados(){
return this.datos.filter((filtro)=>{
return filtro.name.toUpperCase().match(this.buscar.toUpperCase()) || filtro.email.toUpperCase().match(this.buscar.toUpperCase())
})
}
}
})
</script>
</body>
</html>