v-para
Cuando necesita atravesar una matriz o enumerar un objeto en un bucle, lo que uso a menudo es la instrucción de representación de lista v-for. Debe usarse junto con in o of.
P.ej
<li v-for="(item,index) in list" >
Aquí la lista es el nombre de la matriz, el elemento es el objeto a recorrer y el índice corresponde a su subíndice
modelo v
Se utiliza para el enlace bidireccional de datos en elementos de formulario. Por ejemplo, cuando se utiliza en un cuadro de entrada, el contenido de entrada se asignará a los datos enlazados en tiempo real.
<input type="text" placeholder="请输入任务" v-model="notecontent" />
Por ejemplo, el contenido de la nota en el html anterior y el contenido de la nota en los datos se enlazan y transforman sincrónicamente.
var app =new Vue({
el:"#app",
data:{
list:[],
notecontent:"",
}
})
Ejemplo: implementación simple del Bloc de notas
Caracteristicas
1. Agregue automáticamente eventos de visualización ingresando el evento y presione Enter
2. El evento correspondiente
se puede eliminar dinámicamente 3. El número actual de eventos se puede registrar
4. Los eventos se pueden borrar de una vez
análisis
1. Agregue el contenido del cuadro de texto a la lista mediante el evento keyup.enter carriage return. En este momento, el contenido del cuadro de texto se puede obtener directamente de los datos a través del modelo v.
2. Para eliminar el correspondiente evento, puede agregar el índice debajo de v-for Entonces el índice se usa como el parámetro del evento de clic, que se puede eliminar a través de la función de empalme
. 3. Puede usar directamente la función de longitud para registrar el número de eventos.
4 Solo deja la lista vacía.
Código
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>记事本</title>
<link rel="stylesheet" type="text/css" href="css/notebook.css"/>
</head>
<style type="text/css">
body{
text-align: center;
}
#noteli{
list-style-type: none;
}
#notediv{
height: 25px;
background-color: #15c1ff;
}
#divindex{
width: 25px;
height: 25px;
float: left;
color: white;
background-color: #1070ff;
}
#divcontent{
float: left;
color: white;
margin-left: 15px;
}
#divremove{
float: right;
}
#foot{
background-color: #1070ff;
height: 20px;
}
#notenum{
color: #c2c7c8;
font-size: 15px;
float: left;
}
#clear{
float: right;
}
</style>
<body>
<h1>记事本</h1>
<div id="app">
<input type="text" name="" id="addtext" value="" placeholder="请输入任务" v-model="notecontent"
@keyup.enter="add"/>
<div id="">
<ul>
<li v-for="(item,index) in list" id="noteli">
<div id="notediv">
<div id="divindex">{
{ index+1 }}</div>
<div id="divcontent"> {
{ item }}</div>
<input type="button" name="" id="divremove" value="删除" @click="remove(index)" />
</div>
</li>
<div id="foot" v-show="list.length>0">
<span v-if="list.length>0" id="notenum"><strong id="num">{
{list.length}}</strong> 条记录</span>
<input type="button" name="" id="clear" value="清空" v-if="list.length>0" @click="clear"/>
</div>
</ul>
</div>
</div>
<!-- 对于制作原型或学习，你可以这样使用最新版本： -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app =new Vue({
el:"#app",
data:{
list:[],
notecontent:"",
},
methods:{
add:function(){
this.list.push(this.notecontent);
},
remove:function(index){
this.list.splice(index,1);
},
clear:function(){
this.list=[];
}
}
})
</script>
</body>
</html>
correr
