用vue实现点击编辑按钮将li变为可以输入文本的input

Posted harold-hua

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用vue实现点击编辑按钮将li变为可以输入文本的input相关的知识,希望对你有一定的参考价值。

<template>
    <li v-if=flag><span @click=edit()>点击一下</span></li>
    <input type="text" v-else @change=input()>
</template>

export default{
    data(){
        flag:true
    },
    methods:{
        edit(){
               this.flag=false;
        },
        input(){
           this.flag=true;
        },
    }

}

 

以上是关于用vue实现点击编辑按钮将li变为可以输入文本的input的主要内容,如果未能解决你的问题,请参考以下文章

SwiftUI点击任意文本在只读与可编辑之间随意切换的实现

js中文本框由必填变为非必填

vue 实现点击复制文本

使用 Vue 的点击编辑文本字段

Vue实现点击按钮或者图标可编辑输入框

Vue实现点击按钮或者图标可编辑输入框