<!doctype html>
<html>
<head>
<title>Prueba Vue</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="appLSG">
<table border="1">
<tr>
<td>Código</td>
<td>Descripción</td>
<td>Precio</td>
<td>Estudios</td>
<td>Día</td>
<td>Comentario</td>
</tr>
<template v-for="articulo in articulos">
<tr>
<td>{{articulo.codigo}}</td>
<td>{{articulo.descripcion}}</td>
<td>{{articulo.precio}}</td>
<td>{{articulo.estudios}}</td>
<td>{{articulo.dia}}</td>
<td>{{articulo.comentario}}</td>
</tr>
</template>
</table>
<hr>
<form v-on:submit.prevent="addTodo">
<!-- text -->
<p>Código:<input type="text" v-model="codigo"></p>
<p>Descripción:<input type="text" v-model="descripcion"></p>
<p>Precio:<input type="text" v-model="precio"></p>
<!-- radios -->
<p>
<input type="radio" value="Sin estudios" v-model="estudios" id="sinestudios">
<label for="sinestudios">Sin estudios</label>
</p>
<p>
<input type="radio" value="Primarios" v-model="estudios" id="primarios">
<label for="primarios">Primarios</label>
</p>
<p>
<input type="radio" value="Secundarios" v-model="estudios" id="secundarios">
<label for="secundarios">Secundarios</label>
</p>
<p>
<input checked type="radio" value="universitarios" v-model="estudios" id="universitarios">
<label for="universitarios">Universitarios</label>
</p>
<!-- combo -->
<p>
<select v-model="dia">
<option disabled value="">Seleccione un día</option>
<option>Lunes</opcion>
<option>Martes</option>
<option>Miércoles</option>
<option>Jueves</option>
<option>Viernes</option>
<option>Sábado</option>
<option>Domingo</option>
</select>
</p>
<!-- textarea -->
<p><textarea v-model="comentario" cols="100" rows="5" maxlength="200"></textarea></p>
<!-- checkbox -->
<p><input type="checkbox" v-model="terminos"> Acepto los términos y condiciones </p>
<!-- submit -->
<p><input type="submit" v-if="terminos" value="ENVIAR FORM"></p>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: '#appLSG',
data:{
codigo: '',
descripcion: '',
precio: '',
estudios: '',
terminos: false,
dia: '',
comentario: '',
articulos: []
},
methods: {
addTodo: function() {
this.articulos.push({
codigo: this.codigo,
descripcion: this.descripcion,
precio: this.precio,
estudios: this.estudios,
dia: this.dia,
comentario: this.comentario
});
this.codigo = '';
this.descripcion = '';
this.precio = '';
}
}
})
</script>
</body>
</html>
ccc
vue.js: formularios
Suscribirse a:
Enviar comentarios (Atom)
No hay comentarios:
Publicar un comentario