javascript - 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

只需删除计算属性 msgFunc 和 @change 属性我在它工作的地方做了一个 fiddle https://jsfiddle.net/50wL7mdz/53734/

如果你想用@change触发一些东西，请使用方法部分，而不是计算。