Skip to content

Instantly share code, notes, and snippets.

@tiagovizoto

tiagovizoto/alunos.html

Created November 9, 2016 23:17
Show Gist options
  • Save tiagovizoto/65cd55cc33f9ed94351daf685ce74145 to your computer and use it in GitHub Desktop.
Save tiagovizoto/65cd55cc33f9ed94351daf685ce74145 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
alunos.html
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<meta charset="utf-8">
<title id="app">{{nameApp}}</title>
</head>
<body>
<div id="alunosApp">
<form>
<h3>Adicionar Aluno</h3>
Nome: <input type="text" v-model="newAlunoNome" >
Book: <input type="text" v-model="newAlunoBook" >
<button v-on:click="adicionarAluno">Adicionar</button>
</form>
<div>
<li v-for="aluno in alunos">
Nome: {{aluno.name}} --- Book: {{aluno.book}}
</li>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data:{
nameApp: " Meu app VueJS v2.0"
}
});
var alunosApp = new Vue({
el: '#alunosApp',
data:{
newAlunoNome:'',
newAlunoBook:'',
alunos:[
{name:"Tiago Vizoto", book:'Zero'},
{name:'James Trump',book:'One'},
{name:'Mary York',book:'Two'},
{name:'Carly Shoe',book:'Three'},
{name:'Misty Thnaks',book:'Four'},
{name:'Robert Cold',book:'Five'},
]
},
methods:{
adicionarAluno: function(){
this.alunos.push({name:this.newAlunoNome, book:this.newAlunoBook})
this.newAlunoNome =''
this.newAlunoBook= ''
console.log(this.alunos);
}
}
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment