<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
<META HTTP-当量= "X-UA-互換性のある" コンテンツ= "IE =エッジ">
<タイトル>ドキュメント</ TITLE>
<リンクrelが= "スタイルシート" のhref = "node_modules /ストラップ/ DIST / CSS / bootstrap.min.css">
<スクリプトSRC = "node_modules / VUE / DIST / vue.min.js"> </ SCRIPT>
<スタイル>
.of {
テキスト装飾：ライン・スルー。
色：＃3984FF;
}
</スタイル>
</ head>の
<身体>
<DIV ID = "demoDiv">
<DIV CLASS = "コンテナ">
<H2>タスクリスト</ H2>
<P>のタスクの総数{{obj.length}}、{{NUX}}が未完<a href="#" @click="del()"> [完了する</a> </ P>
<ULスタイル= "のlist-style：なし;">
<！ - 動的に作成されたリチウム - >
<！ - スタイルによって選択されたスタイルを変更します - >
<LIスタイル= "マージン左：-20px;" V-のための= "（V、I）は、objの" V-バインド：クラス= "v.style?'del '：' '">
<！ - その後、変数は、チェックボックスにバインドされ、保持する変数を使用する必要があります - >
<input type = "チェックボックス" V-モデル= "v.style">
<！ - V-場合は最後に表示されているかを判断すると、イベントをクリックすることで、ブール値の編集を変更します - >
</ span>の{{v.title}} <スパンV-IF = "！v.edit" @ = "inputList（I）" をクリック>
<！ - 変性ブロックが入力をまたがる、データがカーソルを変更することによって変更され、編集のブールイベントの葉 - >
<input type = "text" V-ELSE @ブラー= "inputList（I）" V-モデル= "v.title">
</ LI>
</ UL>
<input type = "text" Vモデル= "テキスト"> <ボタン@クリックが= "（追加）">添加</ボタン>
</ div>
</ div>
<スクリプトSRC = "node_modules / jqueryの/ DIST / jquery.min.js"> </ SCRIPT>
<スクリプト>
新しいビュー（{
エル： "＃1 demoDiv"、
データ：{
テキスト：""、
//現在の状態を保存するために、元のデータに変数を追加
OBJ：[
{タイトル： "食べる"、編集：偽、スタイル：偽}、
{タイトル： "スリープ"、編集：偽、スタイル：偽}、
{タイトル： "曲"、編集：偽、スタイル：偽}、
{タイトル： "読み"、編集：偽、スタイル：偽}
]
}、
方法：{
//データを追加
{追加（）
this.obj.push（{タイトル：this.text、編集：偽、スタイル：偽}）;
this.text = "";
}、
//ファンクションスイッチを作成します
inputList（I）{
//ユーザ入力ボックスの内容、変更は、コンテンツを変更できないかどうかを決定します
IF（this.obj [I] .style）{
返します。
}他{
！this.obj [i]を.edit = this.obj [i]の.edit。
}
}、
//完了]をクリックして削除
の（）{
//新しい変数に割り当てられたすべてのデータを置きます
VAR ARR = this.obj。
元のデータをすべて消去し//
this.obj = [];
//データセンターのstyle属性で裁判官はfalseです
{（; iはarr.lengthを<I ++がVAR I = 0）のための
（もし！ARR [i]を.style）{
//便利で古いデータへのプッシュで偽データ
this.obj.push（ARR [I]）。
}。
}
}
}、
計算：{
//未完成の数を計算します
NUX：関数（）{
NUM = 0ましょう。
{（this.objでJを聞かせて）のために
（！this.obj [J] .style）{場合
++;
}
}
確かに返します。
}
}
}）;
</ SCRIPT>
</ BODY>
</ HTML>
