// JS Escribir Tablón de Mensajes
dejar entrada = document.querySelector ( "input"); dejar que el botón = document.querySelector ( "botón"); dejar ul = document.querySelector ( "UL");
= Función de button.onclick () {
// crear un nuevo elemento
al dejar que Li = document.createElement ( 'Li');
// añadir elementos
li.innerHTML = input.value;
// añadir un nuevo elemento a la página
// ul. la appendChild (Li);
// determina si o no la lista actual está vacío, vacío añade directamente, en el frente de la no vacío
iF (ul.children.length === 0) {
ul.appendChild (Li);
} {el otro
el primer lugar vamos ul.firstElementChild =;
ul.insertBefore (Li, Nombre);
}
// clara contenido de entrada
input.value = '';
}
</ script>
</ body>
</ HTML>
mensaje // escritura Vue
<! DOCTYPE HTML>
<HTML lang = "ES">
<head>
<meta charset = "UTF-8.">
<Title> crear rápidamente un tablero de mensajes </ title> con Vue
<style type = "text / css">
{div
background-color: # dae3ff;
}
</ style>
</ head>
<body>
** ** conocimiento <br>
1. Obtener elemento <br>
2. Crear elemento <br>
3. elementos Añadir <br >
<H4> mensaje </ H4>
<div id = "App">
<input type = "text" V-Modelo = marcador de posición "de entrada" = "entrada">
<Botón @ Click = "Fill"> presentada </ botón>
<ul>
<-V para Li = "elemento de li "> {{elemento}} </ li>
</ ul>
</ div>
<script src =" ../ vue.js "> </ script>
<script>
deja vm = new Vue ({
EL: '# App',
Datos: {
ENTRADA: '',
Li: []
},
Métodos: {
Fill: function () {
//this.li.push(this.input);//push añadido
// cabeza porción se añadió
this.li.unshift (this.input);
// Borrar área de mensajes
this.input = '';
}
}
});
</ script>
</ body>
</ HTML>