<!doctype html>
<html>
<head>
<title>Prueba Vue</title>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="appLSG">
<p>Nombre: <input type="text" v-model="nombre"></p>
<p>Apellidos: <input type="text" v-model="apellidos"></p>
<p>Escribe edad: <input type="text" v-model="edad"></p>
<p>{{nombre}}</p>
<p>{{apellidos}}</p>
<p v-if="edad>=18">Con {{ edad }} eres mayor de edad.</p>
<p v-else="edad>=18">Con {{ edad }} eres menor de edad.</p>
<h2>Listado de años</h2>
<ul>
<li v-for="anno in arrAnnos">{{anno}}</li>
</ul>
<h2>Listado de un objeto</h2>
<table border="1">
<tr><td>Código</td><td>Descripción</td><td>Precio</td></tr>
<template v-for="articulo in articulos">
<tr>
<td>{{articulo.codigo}}</td>
<td>{{articulo.descripcion}}</td>
<td>{{articulo.precio}}</td>
</tr>
</template>
</table>
<p><button v-on:click="contador = contador + 1">El contador vale:{{contador}}</button></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app=new Vue({
el: '#appLSG',
data:{
nombre: '',
apellidos: '',
contador: 0,
edad : 0,
arrAnnos: ['1940', '1941', '1942', '1943', '1944', '1945'],
articulos: [{
codigo: 1,
descripcion: 'papas',
precio: 12.52
},{
codigo: 2,
descripcion: 'naranjas',
precio: 21
},{
codigo: 3,
descripcion: 'peras',
precio: 18.20
}]
}
})
</script>
</body>
</html>
ccc
vue.js: conceptos básicos
Suscribirse a:
Enviar comentarios (Atom)
No hay comentarios:
Publicar un comentario