v-for
When you need to traverse an array or enumerate an object in a loop, what I often use is the list rendering instruction v-for. It needs to be used in conjunction with in or of.
E.g
<li v-for="(item,index) in list" >
Here list is the array name, item is the object to be traversed, and index corresponds to its subscript
v-model
Used for two-way binding of data on form elements. For example, when used on an input box, the input content will be mapped to the bound data in real time.
<input type="text" placeholder="请输入任务" v-model="notecontent" />
For example, the notecontent in the html above and the notecontent in the data are bound and transformed synchronously.
var app =new Vue({
el:"#app",
data:{
list:[],
notecontent:"",
}
})
Example: Simple Notepad Implementation
Features
1. Automatically add display events by entering the event and press Enter
2. The corresponding event
can be deleted dynamically 3. The current number of events can be recorded
4. The events can be cleared at once
analysis
1. Add the content in the text box to the list through the keyup.enter event. At this time, the content in the text box can be obtained directly from the data through v-model.
2. If you want to delete the corresponding event, you can add the index under v-for Then index is used as the parameter of the click event, which can be deleted through the splice function
. 3. You can directly use the length function to record the number of events.
4. Just make the list empty.
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>
run
