Ir al contenido principal

Vue JS (v-model, v-if, v-for)

Imagen
De Dr. Lang

He aquí un ejemplo de Vue JS.

<!DOCTYPE html>
 <html lang="es">
 <head>
  <meta charset="utf-8"> 
  <title>Curso de Vue JS</title>
  <script
  src="https://code.jquery.com/jquery-3.7.1.js"
  integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<style>
.clase{
 background-color: #4ac8b8;
 color:black;
 font-weight: bold;
}
</style>
<body>
<h1>Programando con Vue JS</h1>
<div id="app">
<h2>1. {{ titulo }}</h2>

<div>
 <h3>Libros</h3>
 <ol>
  <li v-for="libro in libros">{{ libro }}</li>
 </ol>
</div>

<div>
 <p>{{ usuario.nombre }} ,
 {{ usuario.edad>30? "Hombre de edad madura" : "Hombre en plena madurez" }} ,
 {{ usuario.activo==true? "Activo" : "Inactivo" }}</p>
</div>

<div>
 <h3>Cursos</h3>
 <ul v-for="todo in todos">
  <li>{{ todo.texto }}</li>
 </ul>
</div>

<div>
 <span v-if="ver">Puedes ver esto</span>
 <span v-if="nover">No puedes ver esto</span>
</div>
<br/>
<div>
<button v-on:click="mayuscula">May&uacute;scula en t&iacute;tulo</button>
<button v-on:click="minuscula">Min&uacute;scula en t&iacute;tulo</button>
</div>

<div>
 <h2>Formulario</h2>
 <p>{{ mensaje }}</p>
 <label>Escribe tu texto aqu&iacute;:</label>
 <input v-model="mensaje" type="text" placeholder="Escribe tu texto aquí" /><br/>
 <label>Password:</label>
 <input type="password" v-model="password"/>
 <p>Password: {{ password }}</p>
 <br/>
 <label>Escribe tu comentario:</label>
 <p style="white-space: pre-line;">{{ comentario }}</p><br/>
 <textarea v-model="comentario" placeholder="Coloca tu comentario"></textarea><br/><br/>
 El contrato incluye vacaciones.
 <input type="checkbox" id="checkbox" v-model="checked">Aceptar contato:<b> 
 <label for="checkbox">{{ checked==true? "Has aceptado el contrato" : "Deberías aceptar el contrato" }}</label></b>
 <div>
  <h3>Lenguajes de programaci&oacute;n:</h3>
  <input type="checkbox" id="java" value="Java" v-model="checkedNames">
  <label for="java">Java</label>
  <input type="checkbox" id="kotlin" value="Kotlin" v-model="checkedNames">
  <label for="kotlin">Kotlin</label>
  <input type="checkbox" id="typescript" value="TypeScript" v-model="checkedNames">
  <label for="typescript">TypeScript</label>
  <br/><br/>
  <span>Lenguajes elegidos: {{ checkedNames }}</span>
  <br/>
  <h3>Estado civil:</h3>
  <input type="radio" id="soltero" value="Soltero" v-model="picked">
  <label for="soltero">Soltero</label>
  <br/>
  <input type="radio" id="casado" value="Casado" v-model="picked">
  <label for="casado">Casado</label>
  <br/><br/>
  <span>Estado civil: {{ picked }}</span>
  <br/>
  <h3>Selecciona:</h3>
  <select v-model="selected">
   <option disabled value="">Selecciona un pa&iacute;s</option>
   <option>M&eacute;xico</option>
   <option>España</option>
   <option>Italia</option>
  </select>
  <span>Seleccionaste: {{ selected }}</span>
  <h3>Selecciona lo que quieras:</h3>
  <select v-model="seleccionado" multiple>
   <option>Arroz con leche</option>
   <option>Malteada con fresa</option>
   <option>Flan napolitano</option>
   <option>Gelatina con fruta</option>
  </select>
  <br/>
  <span>Seleccionaste: {{ seleccionado }}</span>
  <br/>
  <h3>Elige lo que m&aacute;s convenga:</h3>
  <select v-model="selectivo">
   <option v-for="option in options" v-bind:value="option.valor">{{ option.texto }}</option>
  </select>
  <span>Seleccionaste: {{ selectivo }}</span>
  
 </div>

</div>

</div>

<script>
var app = new Vue({
 el:"#app",
 data:{
  titulo: "Aprendiendo Vue JS",
  libros: ['El secreto oscuro de la princesa Asabache','Las incidencias de la Señora Malvarategate','Los dos perros del puento rojo'],
  usuario:{
   nombre:'Genaro Juarez',
   edad:45,
   activo:false
  },
  todos:[
  {texto:'Spring Boot para principiantes'},
  {texto:'Vue JS para desarrolladores Java'},
  {texto:'TypeScript como si fuera en primero'}],
  ver:true,
  nover:false,
  mensaje:'',
  comentario:'',
  checked:false,
  checkedNames:[],
  picked:'',
  selected:'',
  seleccionado:'',
  selectivo:'A',
  options:[{texto:'Uno',valor:'A'}
  ,{texto:'Dos',valor:'B'}
  ,{texto:'Tres',valor:'C'}],
  password:''
 },
 methods:{
  mayuscula: function(){
   this.titulo = this.titulo.toUpperCase();
  },
  minuscula: function(){
   this.titulo = this.titulo.toLowerCase();
  }
 }
});
</script>
</body>
</html>

En este ejemplo se puede ver el uso de:

  • v-model
  •  v-if 
  • v-for

Enlaces: https://alquimistadecodigo.blogspot.com/2018/06/vue-js.html

Etiquetas

Etiquetas:

Comentarios

Publicar un comentario

Entradas populares de este blog

Programación Windows Batch (CMD) parte 3

De Dr. Lang
Crear ciclos para efectuar operaciones tediosas nos ahorrará tiempo para realizar otras tareas. En está ocasión veremos ciclos con FOR . ¿Cuál es la síntaxis de bucle FOR en Windows Batch? Si está dentro de un archivo *.bat : FOR %%variable IN (seq) DO operaciones Si lo ejecutamos en una terminal: FOR %variable IN (seq) DO operaciones Ejemplo 1 . Recorrer una secuencia de números del 0 al 5: recorrer.bat @ echo off FOR %%i in ( 0 1 2 3 4 5 ) DO echo Hola no. %%i pause Nos imprimirá en pantalla: Hola no. 0 Hola no. 1 Hola no. 2 Hola no. 3 Hola no. 4 Hola no. 5 ¿Puedo usar contadores? Si, se pueden usar. Ejemplo 2 . Uso de contadores: contador.bat @ echo off set numeros = 1 2 3 4 5 6 7 8 9 10 set cont = 0 for %%a in ( %numeros% ) do ( echo Hola no. %%a :: Contador set /a cont+ = 1 ) echo Total: %cont% Este código nos imprimirá, además de los mensajes Hola no. 0 ..., el total de valores conta...
3 comentarios
Leer más

Programación Windows Batch (CMD) parte 4

De Dr. Lang
Siguiendo con la serie de post sobre programación ( 1 , 2 , y 3 ) batch ahora veremos algunas cosas como operaciones aritméticas, operadores lógicos  y uso de ficheros. Cuando somos administradores de servidores o desarrolladores muchas veces tenemos que realizar tareas que nos quitan, relativamente, tiempo valioso que podríamos ocupar para otras cosas (como ver nuestro Facebook, jeje, broma).  Aprender a escribir scripts que nos faciliten algunas tareas siempre es útil. Por ejemplo, conocer todas las características técnicas de nuestro equipo de cómputo nos servirá cuando se realiza peritajes informáticos y soporte al equipo. Realizar respaldos automáticos a nuestras carpetas , archivos y directorios será más sencillo gracias a un script. Pero antes debemos aprender lo básico de la programación en batch. Ejemplo 1. Operaciones aritméticas básicas. aritmetica.bat @ echo off ::Nombre del archivo, imprimirá: aritmetica.bat echo %0 :: Set nos servirá para a...
Publicar un comentario
Leer más

TIOBE index 2024

De Beta
El índice TIOBE (o índice de la comunidad de programación TIOBE) mide la popularidad de los lenguajes de programación. Su índice no se basa en qué lenguaje de programación es mejor, si tiene mejor perfomance, si posee escalabilidad, si es más sencillo de aprender, de usar, de implementar, etc. Sólo se basa en la popularidad. En el número de referencias ya sea en blogs, foros de consulta, etc. No necesariamente si las empresas lo están usando en alguno de sus desarrollos. Este índice es útil para darse una idea qué lenguaje está cobrando más popularidad y prestigio. Enseguida una tabla con los primeros 5 lenguajes más populares. Índice de Noviembre 2024   Nov 2024  Nov 2023  Change  Programming Language  Ratings  Change  1  1    Python  22.85%  +8.69%  2  3  +  C++  10.64%  +0.29%  3  4  +  Java  9.60%  +1.26%  4 ...
Publicar un comentario
Leer más