vue 编辑框

界面代码：

<div id="main" v-cloak v-on:click="hideTooltip">
 
    <!-- 这是一个提示框
         v-on:click.stop 是一个点击事件处理器，stop 修饰符用于阻止事件传递
         v-if 用来判断 show_tooltip 为 true 时才显示 -->
 
    <div class="tooltip" v-on:click.stop v-if="show_tooltip">
 
        <!-- v-model 绑定了文本域的内容
         在文本域内容改变时，对应的变量也会实时改变  -->
 
        <input type="text" v-model="text_content" />
    </div>
 
    <!-- 点击后调用 "toggleTooltip" 方法并阻止事件传递 -->
 
    <!--  "text_content" 变量根据文本域内容的变化而变化 -->
 
    <p v-on:click.stop="toggleTooltip">{{text_content}}</p>
 
</div>

事件代码：

<script>
var demo = new Vue({
    el: '#main',
    data: {
        show_tooltip: false,
        text_content: '点我，并编辑内容。'
    },
    methods: {
        hideTooltip: function(){
            // 在模型改变时，视图也会自动更新
            this.show_tooltip = false;
        },
        toggleTooltip: function(){
            this.show_tooltip = !this.show_tooltip;
        }
    }
})
</script>

附件代码：

 

效果：

 

源代码：

https://github.com/xiamaocheng/vuedemo/tree/master/demo_edit