Conexión de video del curso en línea: https://www.bilibili.com/video/BV15741177Eh?p=40
Primero, creamos una nueva carpeta de proyecto de carrito de compras, y luego creamos tres archivos, a saber: index.html, main.js, style.css
La función es la misma que su nombre, ahora presentamos el estilo principal y nuestro paquete vue en el archivo de índice:
<link rel = "stylesheet" href = "style.css"> <script src = "../ node_modules / vue / dist / vue.js"> </script> <script src = "main.js"> </ guión>
El enlace del profesor se coloca en la etiqueta de la cabeza.
Primero, la etiqueta <table> define la tabla HTML, y la etiqueta <thead> define el encabezado de la tabla. La etiqueta <tr> debe tener una etiqueta <tr>. La etiqueta <tr> representa la fila en la tabla, que contiene: encabezado de tabla cell-contiene el encabezado de la tabla Información (creada por el elemento th), datos estándar que contienen celdas (creado por el elemento td). Usamos esta etiqueta para dibujar el carrito de compras.
<table>
<thread>
<tr>
<th> </ th>
<th> Nombre del libro </ th>
<th> Fecha de publicación </ th>
<th> Precio </ th>
<th> Cantidad de compra </ th >
<th> Operación </ th>
</ tr>
</ thread>
</ table>
Luego defina el estilo en css. Pase: El nombre de la etiqueta {estilo 1; estilo 2;} Este formato está escrito en estilo.
Almacenamos temporalmente los datos del libro en los datos, y el código de la instancia vue también está escrito en el archivo main.js. Para mostrar la información del libro, necesitamos usar v-for para recorrer, así que use el elemento en los libros en la etiqueta <tbody> y muéstrelo en forma de {{item.id}} en su etiqueta td secundaria.
Sale el efecto. Si el estilo no sale, elimine el caché.
Para que el precio muestre el símbolo de RMB y retener dos decimales, presentamos la función del filtro, el efecto del filtro es similar a la función y el efecto del filtro se logra por definición:
filtros: {
showPrice (price) {
price = parseFloat (price)
return '￥' + price.toFixed (2)
}
}
De hecho, puede escribir a Fijo directamente aquí. Si informa un error aquí, puede convertirlo sin error. Como también utilicé el filtro para el lugar equivocado, la cadena se filtró--.
Después de definir los filtros aquí, use este filtro a través de {{item.price | showPrice}} en el código anterior.
Bingo, el efecto de filtro está habilitado.
Luego comenzamos la función de compra de cantidad, el signo más a la izquierda une la función de incremento a la derecha y la función de disminución:
métodos: {
incremento (índice) {
this.books [index] .count + = 1
},
decrement (index) {
if (this.books [index] .count> 0)
this.books [index] .count- = 1
}
},
Aquí el decremento agrega una lógica para evitar que reduzca el libro en el carrito de compras a un número negativo. El maestro usa otro método: agregue una v-bind al botón: disable = "item.count <= 1" Sin deshabilitar, está vinculado al botón y no se puede hacer clic en el botón. Luego coloque la pestaña completa en un div. El div puede usar v-if para verificar si hay libros en el carrito de compras. Cuando se eliminan todos los libros, el v-else en la etiqueta h2 a continuación se activa para mostrar que el carrito de compras no Algo
Finalmente mostramos el precio total, precio total:
calculado: {
totalPrice () {
let totalPrice = 0
for (let i = 0; i <this.books.length; i ++) {
totalPrice + = this.books [i] .price * this.books [i] .count
}
return totalPrice
}
},
Naturalmente, está escrito en el atributo de cálculo, de modo que el precio total saldrá directamente después del precio total, y el nombre debe tener la forma de un sustantivo.
Triunfó.
let newnums = nums.filter (function (n) {return true})
Este es el uso de una función de filtro. Cuando el valor de la función en el filtro es verdadero, el valor en nums se instalará en una nueva matriz, de modo que las unidades especiales en nums se puedan filtrar.
let newnums = nums.map (function (n) {return 100})
Este es el uso de una función de mapa. El mapa pasará cada elemento de la matriz a la función y aceptará el valor de retorno. El resultado es que todos los elementos en nums se han convertido en 100.
A continuación, hablemos sobre v-model:
El modelo v también se conoce como Weibang touch, usado para unir elementos.
<input type = "text" v-model = "message">
{{message}}
De esta forma, la unión del modelo v simplemente se logra: el contenido de la entrada estará vinculado al mensaje y el mensaje ingresado se convierte en lo que es. Si usa v-bind: value, el valor en el mensaje se mostrará en el cuadro de entrada, pero si cambia el contenido del cuadro no cambiará el mensaje. v-on: input = "Nombre de función" se puede usar para escuchar los eventos de entrada del usuario. ¿Cómo logramos la función de v-model?
<input type = "text" v-model = "message" v-on: input = "valueChange">
valueChange es así:
valueChange (event) {
this.message = event.target.value
}
Aquí el evento no necesita pasar los parámetros anteriores, el valor del objetivo en el evento es el valor de la cadena completa después de cada entrada en el teclado. Tomados en conjunto, son equivalentes a las funciones del modelo v.
Estamos estudiando el uso de v-model: primero cree una radio para indicar género:
<label for = "male">
<input type = "radio" id = "male" name = "sex"> 男
</label>
<label for = "female">
<input type = "radio" id = "female "name =" sex "> 女
</label>
Aquí, si no le da el mismo valor al nombre, puede elegir hombre o mujer. Después de darlo, solo puede elegir un elemento. Este es un formulario.
<h1> {{sex}} </h1>
<label for = "male">
<input type = "radio" id = "male" value = "男" v-model = "sex"> 男
</label>
<label for = "female">
<input type = "radio" id = "female" value = "女" v-model = "sex"> 女
</label>
De esta manera, si hacemos clic en el hombre, el contenido de la variable de sexo en los datos es masculino, y la mujer es la mujer. Cabe señalar aquí que incluso el nombre se omite, y la misma variable vinculada al modelo v se predetermina a un contenido mutuamente exclusivo, no es necesario escribir el nombre.
Uso de v-model y chebox:
<label for = "">
<input type = "checkbox" id = "accept" v-model = "isAgree"> 同意 协议
<button: disabled = "! isAgree"> 下一步 </button>
</label>
La casilla de verificación aquí acuerda vincular la variable booleana isAgree con el modelo v. Cuando el usuario selecciona esta casilla de verificación, se puede hacer clic en el botón, porque el atributo deshabilitado del botón también está vinculado al valor opuesto de isAgree, cuando es cierto Haga clic cuando esté deshabilitado es falso. Aquí está la casilla de verificación:
<label for = "">
爱好 {{hobbies}}
<input type = "checkbox" value = "唱" v-model = "hobbies"> 唱
<input type = "checkbox" value = "跳" v-model = "hobbies"> 跳
<input type = "checkbox" value = "rap" v-model = "hobbies"> rap
<input type = "checkbox" value = "篮球" v-model = "hobbies"> 篮球
</ label >
Los pasatiempos vinculados al modelo v aquí son una matriz. Usted agrega el valor de la afición cada vez que selecciona una afición y anula la selección de un valor en la matriz de aficiones.
La selección de v-model utiliza:
Seleccionar se divide en selección única y selección múltiple.
<select name = "abc" id = "" v-model = "fruit">
<option value = "apple"> apple </ option>
<option value = "banana"> banana </ option>
<option value = " Durian "> Durian </ option>
<option value =" Grape "> Grape </ option>
<option value =" Peach "> Peach </ option>
</ select>
<h1> Seleccionó {{fruit}} < / h1>
Después del enlace del modelo v, puede completar el efecto de enlace de la selección única.
La selección múltiple requiere agregar un múltiplo
<select name = "abc" id = "" v-model = "fruits" multiple>
Aquí las frutas siguen siendo una matriz, el efecto:
No tenemos que escribir las frutas u otros tipos de escritura de esta manera. Poner los tipos en una matriz y usar v-for para atravesar la generación es más correcto. Métodos de escritura comúnmente utilizados:
<label v-for = "item in items">
<input type = "text": value = "item" v-model = "hobbies"> {{item}}
Uso del modificador v-model:
perezoso
<input type = "text" v-model.lazy = "message">
<h1> {{message}} </h1>
Después de seleccionar perezoso, la variable vinculada al modelo v ya no se actualiza con frecuencia. Espere hasta que el usuario haya terminado de ingresar y presione Entrar o haga clic en otra área para actualizar esta variable.
<input type = "number" v-model.lazy = "message">
<h1> {{message}} </h1>
Entonces solo puede ingresar el tipo de número
podar
También se usa en v-model.trim, que puede eliminar los espacios ingresados antes y después.