v-für
Wenn Sie ein Array durchlaufen oder ein Objekt in einer Schleife auflisten müssen, verwende ich häufig die Listenrendering-Anweisung v-for. Sie muss in Verbindung mit in oder von verwendet werden.
Z.B
<li v-for="(item,index) in list" >
Hier ist die Liste der Array-Name, das Element das zu durchlaufende Objekt und der Index dem Index
V-Modell
Wird zum bidirektionalen Binden von Daten an Formularelementen verwendet. Bei Verwendung in einem Eingabefeld wird der Eingabeinhalt beispielsweise in Echtzeit den gebundenen Daten zugeordnet.
<input type="text" placeholder="请输入任务" v-model="notecontent" />
Beispielsweise werden der Notizinhalt im obigen HTML und der Notizinhalt in den Daten synchron gebunden und transformiert.
var app =new Vue({
el:"#app",
data:{
list:[],
notecontent:"",
}
})
Beispiel: Einfache Notepad-Implementierung
Eigenschaften
1. Fügen Sie Anzeigeereignisse automatisch hinzu, indem Sie das Ereignis eingeben und die Eingabetaste drücken.
2. Das entsprechende Ereignis
kann dynamisch gelöscht werden. 3. Die aktuelle Anzahl der Ereignisse kann aufgezeichnet werden.
4. Die Ereignisse können sofort gelöscht werden
Analyse
1. Fügen Sie den Inhalt des Textfelds über das Wagenrücklaufereignis keyup.enter zur Liste hinzu. Zu diesem Zeitpunkt kann der Inhalt des Textfelds direkt aus den Daten über das V-Modell abgerufen werden.
2. Löschen des entsprechenden Inhalts Ereignis können Sie den Index unter dem v-for hinzufügen. Dann wird der Index als Parameter des Klickereignisses verwendet, das über die Spleißfunktion gelöscht werden kann
. 3. Sie können die Längenfunktion direkt verwenden, um die Anzahl der Ereignisse aufzuzeichnen.
4 Machen Sie einfach die Liste leer.
Code
<!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>
Lauf
