JSFiddle - React, Tailwind, and code Playground

by wladyband

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<title>Star War</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" >
</head>
<body>
	
<div class="container" id="app">
	<div class="row">
	
	</div>
			<div class="well">
			   <input  type="search" v-model="MySearch" class="form-control"  placeholder="Digite a sua busca"/>
	        </div>   
    
        <div class="row">
        <table class="table">
            <thead>
              <tr>
								<th>Localização</th>
							  <th id="contato">Contato</th>
							  <th>E-mail</th>
              	<th>Endereço</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="bancodedado in filteredBancodedaos ">
							  <td>{{ bancodedado.localizacao }}</td>
							  <td>{{ bancodedado.celular }}</td>
							  <td>{{ bancodedado.email }}</td>
              	<td>{{ bancodedado.endereco }}</td>
              </tr>
            </tbody>
          </table>
    </div>

<!--   v-if="MySearch"   -->

</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.6/vue-resource.js"></script>

</body>

<style>
.table td, .table th {
  font-size: 12px;
}


#contato{
	width: 115px;
}

</style>


</html>

JavaScript

var app = new Vue({


	
  el: '#app',
  data: {
    bancodedados: [
			
			{	
				endereco: 'Rua Pamplona, 1704 - 1º Andar - Loja 1.15, Jardim Paulista - São Paulo',
				localizacao: 'Jardim Pamplona Shopping',
				celular: '(11) 94581-8286',
				email: '[email protected]'
       },
       {	
				endereco: 'Rua Pamplona, 1704 - 1º Andar - Loja 1.15, Jardim Paulista - São Paulo',
				localizacao: 'Bourbon Shopping',
				celular: '(11) 94581-8286',
				email: '[email protected]'
       },
       {	
				endereco: 'R. Gen. de Divisão Pedro Rodrigues da Silva, 400, Barueri',
				localizacao: 'Parque shopping Barueri',
				celular: '(11) 9.8521-2560',
				email: '[email protected]'
       }, {	
				endereco: 'Praça dos Cravos, 34, Barueri',
				localizacao: '',
				celular: '(11) 9.7518-2515',
				email: '[email protected]'
       }, {	
				endereco: 'Avenida Leão Machado, 100, Osasco',
				localizacao: 'Continental Shopping',
				celular: '(11) 3768-0386',
				email: '[email protected]'
       }, {	
				endereco: 'Av. dos Autonomistas, 1400 – loja 217, Osasco',
				localizacao: 'Shopping União',
				celular: '(11) 9.7026-5165',
				email: '[email protected]'
       }, {	
				endereco: 'Av. Autonomistas, 1.828, Osasco',
				localizacao: 'Super Shopping Osasco',
				celular: '(11) 9.4388-0000',
				email: '[email protected]'
       }, {	
				endereco: 'Rodovia Raposo Tavares, 23, Cotia',
				localizacao: 'Shopping Granja Vianna',
				celular: '(11) 9.9477-0752',
				email: '[email protected]'
       }, {	
				endereco: 'Rua Jacy Teixeira de Camargo, 940, Campinas',
				localizacao: 'Campinas Shopping',
				celular: '19) 9.9553-7908',
				email: '[email protected]'
       }, {	
				endereco: 'Rod. Dom Pedro I, 131.5 - Jardim Nilópolis,...