<！DOCTYPE HTML > < HTML LANG = "EN" > < 頭> < メタ文字コード= "UTF-8" > < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > < タイトル>ドキュメント</ タイトル> < スクリプトSRC = "./ libに/ VUE-2.4.0.js" > < > リー{ ボーダー：1ピクセル破線＃999 。 マージン：5pxの; 行の高さ：35px ; パディング左：5pxの; フォントサイズ：12ピクセル; 幅：100％; } のLi：ホバー{ 背景色：hotpink 。 トランジション：すべての0.8秒やすさ。 } .V入力し、 .V-残す-に{ 不透明度：0 ; 変換：移動Y、（80px）を; } ・V-アクティブ入力し、 .V-残す活性{ 転移：すべて0.6秒EASE ; } / * 以下.V-移動し.V脱退活性併せ、可能後続リストの要素、徐々にドリフトの効果* / .V-移動{ 転移：すべて0.6秒やすさ; } .V-ままアクティブ{ 位置：絶対; } </ スタイル> </ ヘッド> < ボディ> < div要素ID = "アプリ" > < divの> < ラベル> イド： < 入力タイプ= "テキスト" Vモデル= "ID" > </ ラベル> < ラベル> 名前： < 入力タイプ= "テキスト" Vモデル=」名」> </ ラベル> < 入力タイプ= "ボタン" 値= "添加" @click = ""を追加します> </ DIV > <！ - <UL> - > <！ -遷移リストを実装するときの遷移元素を必要に応じて、ループの外にV-ためでレンダリングされ、あなたはtransitionGroup移行パッケージが必要とされて使用することはできません- > <！ - あなたは、V-ための循環のために作成したい場合は要素がアニメーション化各要素に設定する必要があります。キー属性を- > <！ - ちょうどその時入場時間効果のページを達成するために属性を追加するように見えるグループをransitionまで表示- > <！ - による遷移族元素としてタグ属性を指定しない場合、デフォルトは、ラベルがスパンとしてレンダリングされ、タグの属性セットが、レンダリング指定された遷移族元素を特定し、- > < 遷移グループは、タグに表示され=「UL」> < 李V-のための=「（項目、I）リストでは、 " ：キー=" item.id " @click ="デル（I） " > {{}} ---、item.nameをitem.idための{{}} </ 李> </ 遷移基> <！ - </ UL> - > </ divの> < スクリプト> // のViewModel与えることを、Vueのインスタンスを作成します VARにVM = 新しい新しいヴュー（{ EL：' #app ' 、 データ：{ ID：'' 、 名前を：'' 、 リスト：[ {ID：1 、名称：' 趙ガオ' }、 {ID：2 、名称：' 秦檜' }、 {ID：3 、名前：' 严嵩' }、 {ID：4 、名称：' 魏忠贤' } ] }、 メソッド：{ （）{追加 この.list.push（{ID：この.ID、名前：この.nameの}） この.ID = この.nameの= '' }、 デル（I）{ この.list.splice（I、1 ） } } }）。 </ スクリプト> </ ボディ> </ htmlの>