JS VUEのテキストボックスに入力し、テストラベルpの内容を変更するには

入力テキストボックス、タグの内容が自動的にテキストボックスのPの内容は、以下の三つの方法がテストされるようになります。

方法1：方法を書かれたテキストボックスの内容は、イベントを変更するのonchangeでのJSは、pタグ自体を取得し、テキストボックスの値を取得し、変数に割り当てられ、pタグにテキストボックスの最後に割り当てられた値です。
効果：入力フォーカスがテキストボックスにテキストボックス、pタグ値を離れたとき、道を入力し、p個のタグが変更されない、またはオリジナルコンテンツ。

方法2：oninputでJS、テキストボックス変更イベントの内容が（上記とは異なるが直ちに有効となります）、上記イベントの方法。
効果：道を入力し、p個のラベルの変更が続く、リアルタイム入力方法が変更されます。

方法3：導入vue.jsは、入力されたテキストボックスプラスV-モードに、コンテンツを設定するには場所DIV3 Pのラベル位置に表示される必要があり
効果：途中で入力を、pタグは、変化に追従しますリアルタイム入力方法が変更されます。

テストコード：

  < スタイル> 
 ＃1 DIV1 { 背景色：＃1 d9b6b6 。} 
 ＃1 DIV2 { 背景色：＃1 b4e7aa 。} 
 ＃1 DIV3 { 背景色：＃1 c5f2ee 。} 
  </ スタイル> 
 </ ヘッド> 
 < 身体> 
  < スクリプトSRC = "vue.js" > </ スクリプト> 
</ ヘッド> 
< 身体> 
< div要素のid = "DIV1" ><！ - 非VUE - > 
JS的onchage事件：
< 入力タイプ= "テキスト" ID = "T1" のonchange = "P1（）" > 
< PのID = "PP" >原始值</ P > 
</ DIV > 
< スクリプト> 
関数P1（）{
     VARのlb_p = のdocument.getElementById（" PP " ）。
    VAR txt_t1 = のdocument.getElementById（" T1 " ）.VALUE。）;
        ました






txt_t2 = のdocument.getElementById（" T2 " ）.VALUE。
        lb_p.innerHTML = txt_t2。
} 
</ スクリプト> 

< DIV ID = "DIV3" > 
VUE的Vモード：
  < 入力Vモデル= "メッセージ" > 
  < P > {{メッセージ}} </ P > 
</ DIV > 
< スクリプト> 
新しいヴュー（{ 
  EL：' ＃DIV3 ' 、
  データ：{ 
    メッセージ：元の値" 
  } 
}）
</ スクリプト> 
 </ ボディ>

アイコン：