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:

Comentarios

Publicar un comentario

Entradas populares de este blog

Odin language: el lenguaje de programación orientado a datos para un desarrollo de software sensato

De Dr. Lang
En esta serie sobre lenguajes de programación hablamos de Odin , un lenguaje orientado a datos. Un nuevo lenguaje de programación que nos podrá recordar a lenguajes como C++, Python, Golang o hasta Rust. Instalación (Windows): 1 2 3 4 $ git clone https://github.com/odin-lang/Odin $ cd Odin $ git pull $ build.bat release Debemos asegurarnos de crear la variable de entorno: Nombre: ODIN_HOME Valor: C:\Users\HP\Documents\pruebasOdin\Odin Ejemplo 1. Como primer programa tendremos al clásico "Hola, mundo". holamundo.odin package holamundo import " core:fmt " main : : proc ( ) { fmt . println ( " ¡Hola, mundo desde Odin! " ) } Construimos: $ odin build holamundo . odin - file Ejecutamos: $ holamundo .exe Recordar que si usamos Visual Studio Code podemos instalar el plugin de Odin Language: https://marketplace.visualstudio.com/items?itemName=DanielGavin.ols Ejemplo 2. Programa que muestre las variables que pod...
Publicar un comentario
Leer más

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

z/OS, ¿Qué es? y ¿Cuáles son sus herramientas?

De Beta
  En este post veremos las herramientas de z/OS de IBM. z/OS es un sistema operativo de mainframe desarrollado por IBM.  Es parte de la serie IBM z Systems (anteriormente conocida como System z), que se utiliza en los sistemas mainframe de IBM. z/OS es uno de los sistemas operativos más utilizados en el mundo empresarial para ejecutar aplicaciones críticas y procesar grandes volúmenes de datos. Características clave de z/OS: Escalabilidad : z/OS es conocido por su capacidad para manejar grandes cargas de trabajo y escalabilidad vertical, lo que permite agregar recursos de hardware para satisfacer las demandas de procesamiento. Confiabilidad y disponibilidad : z/OS está diseñado para ofrecer alta disponibilidad y confiabilidad. Incorpora características como redundancia y recuperación ante fallas para garantizar la continuidad de las operaciones. Seguridad : Proporciona una amplia gama de funciones de seguridad, como autenticación, autorización y auditoría, para proteger los...
Publicar un comentario
Leer más