Skip to content

Instantly share code, notes, and snippets.

@claudiainbytes

claudiainbytes/index.html

Created March 28, 2018 01:43
Show Gist options
  • Save claudiainbytes/dec3730a1a7c580440d000770bde9c63 to your computer and use it in GitHub Desktop.
Save claudiainbytes/dec3730a1a7c580440d000770bde9c63 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/tileteb
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-12">
<h1>El Mercado</h1>
<p>Escribe que necesitas</p>
<form class="form-inline">
<div class="form-group">
<input type="text" class="form-control" v-model="articulo">
<input type="button" class="btn btn-primary" value="Agregar a lista" @click="anadirArticulo(articulo)">
</div>
</form>
<hr>
<p v-if="listaCompras.length <= 0">La lista de compras esta vacía.</p>
<ul class="list-unstyled" v-for="(articulo, index) in listaCompras">
<li>{{articulo.articulo}}
<input type="button" class="btn btn-danger btn-xs" value="Borrar" @click="borrarArticulo( articulo, index)">
</li>
</ul>
<hr>
<p v-if="listaCompras.length > 0">Total de elementos a comprar: {{listaCompras.length }}</p>
<!--pre>{{ $data }}</pre-->
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script id="jsbin-javascript">
var app = new Vue({
el: '#app',
data: {
articulo:'',
listaCompras: [{ articulo: 'Tomate'},
{ articulo: 'Lechuga'},
{ articulo: 'Cebolla'}],
},
methods:{
anadirArticulo: function(nombre){
if(nombre.trim()){
this.listaCompras.push({articulo:nombre});
this.articulo = '';
} else {
alert("Agrega lo que necesitas en la lista");
}
},
borrarArticulo: function(articulo, index){
if(confirm('Eliminar "' + articulo.articulo + '" de la lista de compras?'));
this.listaCompras.splice(index, 1);
}
}
})
</script>
<script id="jsbin-source-javascript" type="text/javascript">
var app = new Vue({
el: '#app',
data: {
articulo:'',
listaCompras: [{ articulo: 'Tomate'},
{ articulo: 'Lechuga'},
{ articulo: 'Cebolla'}],
},
methods:{
anadirArticulo: function(nombre){
if(nombre.trim()){
this.listaCompras.push({articulo:nombre});
this.articulo = '';
} else {
alert("Agrega lo que necesitas en la lista");
}
},
borrarArticulo: function(articulo, index){
if(confirm('Eliminar "' + articulo.articulo + '" de la lista de compras?'));
this.listaCompras.splice(index, 1);
}
}
})</script></body>
</html>
Raw
jsbin.tileteb.js
var app = new Vue({
el: '#app',
data: {
articulo:'',
listaCompras: [{ articulo: 'Tomate'},
{ articulo: 'Lechuga'},
{ articulo: 'Cebolla'}],
},
methods:{
anadirArticulo: function(nombre){
if(nombre.trim()){
this.listaCompras.push({articulo:nombre});
this.articulo = '';
} else {
alert("Agrega lo que necesitas en la lista");
}
},
borrarArticulo: function(articulo, index){
if(confirm('Eliminar "' + articulo.articulo + '" de la lista de compras?'));
this.listaCompras.splice(index, 1);
}
}
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment