Vue 双击修改数据

html

<div id="app">
    <label>
    <!--键盘事件 keydown.13 13代表enter-->
        <input type="text" @keydown.13="add" v-model="inputVal">
    </label>
    <button @click="add">提交</button>

<ul>
     <li v-for="(item,index) in list" :key="index">
<!--         v-if="item.isShow" 默认让它显示-->
<!--         @dblclick 双击后 item.isShow改为false
    update(item,false)两个参数,第一个是数据本身,第二个 false
-->
        <span v-if="item.isShow" @dblclick="update(item,false)">{{item.val}}</span>
         <label>
             <!--autofocus自动获取焦点
             @blur="update(item,true) 失去焦点的时候,改为true 就是让它隐藏
             v-if="!item.isShow" item.isShow 默认是true, !item.isShow 就是false
             -->
             <input type="text" v-model="item.val"  autofocus v-if="!item.isShow"
             @blur="update(item,true)">
         </label>
     </li>
</ul>
</div>

js

<script>
    new Vue({
        el:'#app',
        data:{
            inputVal:'',
            list:[
                {val:"滴滴",isShow:true},
                {val:"热热",isShow:true},
                {val:"哒哒",isShow:true},
            ]
        },
        methods:{
           add(){
                //添加的时候默认添加isShow:true默认显示
                this.list.push({
                    val:this.inputVal,
                    isShow:true,
                })
            },
            ///传进来两个参数 item(数据本身) 和 true/false
            update(item,isShow){
                item.isShow = isShow
            }
        }
    })
</script>