VueJSで入力値が変化した場合のdivの入力値の表示方法は？

Question

入力した値をキャプチャして別のdivに表示したいと思います。

は私のコードを見て：あなたは、コードを見てみると

を、私は機能msgFuncに値を保存し、その後、私は私の変数MSGでこの結果を適用するだろうが、私は理解していません。

export default { 
 
     data() { 
 
      return { 
 
       msg: '' 
 
      } 
 
     }, 
 
     computed: { 
 
      msgFunc:() => { 
 
       return this.value 
 
      } 
 
     } 
 
    }

.flex { 
 
     display: flex; 
 
     flex-flow: row wrap; 
 
     justify-content: center; 
 
     align-items: center; 
 
     height: 90%; 
 
    } 
 
    .input-container { 
 
     width: 410px; 
 
     background-color: #fff; 
 
     padding: 2px 15px 20px 15px; 
 
     box-shadow: 0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.3); 
 
     transition: transform .1s ease-in-out; 
 
    } 
 
    .input-container input { 
 
     margin-top: 10px; 
 
     width: 100%; 
 
     border-bottom: 1px solid #25A3FF; 
 
     padding: 10px 0; 
 
     font-size: 16px; 
 
     color: #929292; 
 
    } 
 
    input:focus { 
 
     outline: none; 
 
    }

<div class="flex"> 
 
     <section class="input-container"> 
 
      <input type="text" v-model="msg" @change="msgFunc" placeholder="Type your HEX color"> 
 
      <h3>{{msg}}</h3> 
 
     </section> 
 
    </div>

Answer 1

ちょうどあなたが@changeで何かをトリガーにしたい場合は、方法のセクションを使用してください、私はそれがhttps://jsfiddle.net/50wL7mdz/53734/

を作品バイオリンを作った計算されたプロパティmsgFuncと@change属性 を削除計算されません。