Question

我想要捕获我输入的值并显示在另一个div上。

查看我的代码：

如果查看代码，我会将值保存在函数msgFunc中，之后我会将此结果应用于我的变量msg中，但我不明白。

＆＃13;

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

＆＃13;

.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;
    }

＆＃13;

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

＆＃13;

Answer 1

只需删除计算属性msgFunc和@change属性即可我做了一个小提琴，https://jsfiddle.net/50wL7mdz/53734/

如果你想用@change触发某些内容，请使用方法部分，而不是计算。

当输入值在VueJS中变化时，如何在div中显示输入值？

1 个答案: