v-for
配列をトラバースしたり、ループ内のオブジェクトを列挙したりする必要がある場合、私がよく使用するのはリストレンダリング命令v-forです。これは、inまたはofと組み合わせて使用する必要があります。
例えば
<li v-for="(item,index) in list" >
ここで、listは配列名、itemはトラバースされるオブジェクト、indexはその添え字に対応します。
vモデル
フォーム要素のデータの双方向バインディングに使用されます。たとえば、入力ボックスで使用される場合、入力コンテンツはバインドされたデータにリアルタイムでマップされます。
<input type="text" placeholder="请输入任务" v-model="notecontent" />
たとえば、上記のhtmlのnotecontentとデータのnotecontentは、同期してバインドおよび変換されます。
var app =new Vue({
el:"#app",
data:{
list:[],
notecontent:"",
}
})
例：簡単なメモ帳の実装
特徴
1.イベントを入力してEnterキーを押すと、表示イベントが自動的に追加されます
。2。対応するイベント
を動的に削除できます。3 。現在のイベント数を記録できます
。4。イベントを一度にクリアできます。
分析
1. keyup.enterイベントを使用して、テキストボックスのコンテンツをリストに追加します。このとき、テキストボックスのコンテンツは、v-modelを介してデータから直接取得できます
。2 。対応するコンテンツを削除する場合イベントの場合、vの下にインデックスを追加できます-for Thenインデックスはクリックイベントのパラメータとして使用され、スプライス関数
を使用して削除できます。3 。長さ関数を直接使用してイベントの数を記録できます
。4。リストを空にするだけです。
コード
<!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>
実行
