Skip to content

Instantly share code, notes, and snippets.

@carlosanders

carlosanders/index.html

Last active April 2, 2017 16:14
Show Gist options
  • Save carlosanders/5aae1305f8f6bd8bacd69514f9738a97 to your computer and use it in GitHub Desktop.
Save carlosanders/5aae1305f8f6bd8bacd69514f9738a97 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin// source https://jsbin.com/qojihec
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
<title>JS Bin</title>
</head>
<body>
<h1 class="text-info">
{{ message }}
</h1>
<div id="app">
<select v-model="selected">
<option v-for="state in states"
:value="state.uf.toLowerCase()">
{{ state.nome }}
</option>
</select>
</div>
<hr />
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<pre>{{ selected | json }}</pre>
</div>
</body>
</html>
Raw
jsbin.qojihec.js
/* jshint esnext: true */
var app = new Vue({
el: 'body',
data: {
message: 'Hello Vue!',
selected: 'rj',
states: [
{
"id": "1",
"uf": "AC",
"nome": "Acre"
},
{
"id": "2",
"uf": "AL",
"nome": "Alagoas"
},
{
"id": "3",
"uf": "AM",
"nome": "Amazonas"
},
{
"id": "4",
"uf": "AP",
"nome": "Amapá"
},
{
"id": "5",
"uf": "BA",
"nome": "Bahia"
},
{
"id": "6",
"uf": "CE",
"nome": "Ceará"
},
{
"id": "7",
"uf": "DF",
"nome": "Distrito Federal"
},
{
"id": "8",
"uf": "ES",
"nome": "Espírito Santo"
},
{
"id": "9",
"uf": "GO",
"nome": "Goiás"
},
{
"id": "10",
"uf": "MA",
"nome": "Maranhão"
},
{
"id": "11",
"uf": "MG",
"nome": "Minas Gerais"
},
{
"id": "12",
"uf": "MS",
"nome": "Mato Grosso do Sul"
},
{
"id": "13",
"uf": "MT",
"nome": "Mato Grosso"
},
{
"id": "14",
"uf": "PA",
"nome": "Pará"
},
{
"id": "15",
"uf": "PB",
"nome": "Paraíba"
},
{
"id": "16",
"uf": "PE",
"nome": "Pernambuco"
},
{
"id": "17",
"uf": "PI",
"nome": "Piauí"
},
{
"id": "18",
"uf": "PR",
"nome": "Paraná"
},
{
"id": "19",
"uf": "RJ",
"nome": "Rio de Janeiro"
},
{
"id": "20",
"uf": "RN",
"nome": "Rio Grande do Norte"
},
{
"id": "21",
"uf": "RO",
"nome": "Rondônia"
},
{
"id": "22",
"uf": "RR",
"nome": "Roraima"
},
{
"id": "23",
"uf": "RS",
"nome": "Rio Grande do Sul"
},
{
"id": "24",
"uf": "SC",
"nome": "Santa Catarina"
},
{
"id": "25",
"uf": "SE",
"nome": "Sergipe"
},
{
"id": "26",
"uf": "SP",
"nome": "São Paulo"
},
{
"id": "27",
"uf": "TO",
"nome": "Tocantins"
}]
}, //fim array
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment