如何在輸入值在VueJS中更改時以div顯示輸入值？

我想要捕捉我的輸入值並在另一個div上顯示。如何在輸入值在VueJS中更改時以div顯示輸入值？

看看我的代碼：

如果你看一下代碼，我保存功能msgFunc的價值，在那之後我會在我的變量味精應用此結果，但我不明白。

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>

來源

2017-08-15 Jonathan

'v-model'已經自己更新'msg'的值。我不確定你想要完成什麼 – thanksd

只要刪除計算財產msgFunc和@change屬性我做了一個撥弄它，如果你想要觸發一些與@change工作https://jsfiddle.net/50wL7mdz/53734/

，請使用方法部分，沒有計算。

來源

2017-08-15 17:13:20 Reiner

可能需要['.lazy'修飾符]（https://vuejs.org/v2/guide/forms.html#lazy）。很難從原帖中分辨出來。 –

完成了！謝謝 – Jonathan

如何在輸入值在VueJS中更改時以div顯示輸入值？

回答

相關問題