Question

我是Vuejs环境的新手。我必须在Vuejs中实现内联编辑。最初会有段落。鼠标悬停时，我想在同一位置显示文本框并隐藏段落元素，反之亦然。

如何在Vuejs中实现这一目标？

Answer 1

这是我认为你要求的一个工作范例。 Plunker

<body>
<div id="app">
    <p @mouseover="mouseOver" v-show="!active"> {{message}}</p>
    <div v-show="active" @mouseleave="mouseOut">
    <input v-model="message" placeholder="edit me">
    </div>
</div>
<script>
 new Vue({
            el: "#app",
            data: {
                message: "Message can be shown here",
                active:false,
            },
            methods: {
                mouseOver: function(){
                    this.active = true;   

                },
                mouseOut:function(){
                this.active=false;
                }
            } 
});</script></body>

P.S。请在stackoverflow上询问问题时分享您的所作所为

如何在Vuejs 2.0中悬停某些元素时显示输入框

1 个答案: