<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的更多相关文章

  1. bootstrap-table:操作栏点击编辑按钮弹出模态框修改数据

    核心代码: columns: [ { checkbox:true //第一列显示复选框 }, ... { field: 'fail_num', title: '失败数' }, { field: 'op ...

  2. vue点击编辑按钮,内容变成input可以修改,也可以删除

    一.效果 图1 图2,点击报错之后,又变成图1的效果 二.使用到了element UI中的以下组件: <el-button> <el-input> 三.使用的关键点是vue中的 ...

  3. ElementUI table 点击编辑按钮进行编辑实现示例

    <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <meta nam ...

  4. Ubuntu 18.04中截图工具Shutter的编辑按钮不可用的解决办法

    Shutter是一个由第三方提供的在Ubuntu上运行的截图工具,相对于系统自带的截图工具(默认可通过Ctrl + Shift + Print快捷键启动截图),最大的优点就是可以即时对图片进行编辑,在 ...

  5. 点击编辑table变为可编辑状态

    简单描述:开发中遇到一个小困难,table展示的数据,需要是可编辑的,点击编辑按钮,页面table可以进行编辑,编辑完成后,点击保存数据就保留下来~~~ 思路:用一个带有input的表去替换不带inp ...

  6. corethink功能模块探索开发(十四)后台编辑按钮

    效果图: 1.添加下图55&58行代码 2.实现edit方法 位于Equip/Admin/DeviceRepaireAdmin.class.php中 public function edit( ...

  7. vue+element-ui 实现table单元格点击编辑,并且按上下左右键单元格之间切换

    通过我的测试我发现两个两种方法来编辑单元格的内容 第一种点击编辑: 我是给td里添加一个input,将值赋值给input,当失去焦点的时候将input的值付给td原来的内容,然后将input删除, 代 ...

  8. asp.mvc中的vue分页实例,分页组件无法重置reload,解决点击查询按钮后,分页不刷新的问题

    刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...

  9. vue 如何点击按钮返回上一页

    1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...

随机推荐

  1. AtCoder瞎做第二弹

    ARC 067 F - Yakiniku Restaurants 题意 \(n\) 家饭店,\(m\) 张餐票,第 \(i\) 家和第 \(i+1\) 家饭店之间的距离是 \(A_i\) ,在第 \( ...

  2. CentOS 7 网卡配置对比

    1.DHCP模式(原始) [root@centos7-minimal /]# vim /etc/sysconfig/network-scripts/ifcfg-eno16777736 TYPE=&qu ...

  3. Java程序设计第一次作业

    虽说这学期Java比上学期的C语言要简单些许,但是初次面对java程序,还是有点难度的.

  4. C# activex开发中 axwebbrowser控件及 IE浏览器设置

    <object type='application/x-vlc-plugin' id='vlc' events='True' codebase='../cab/axvlc.cab' classi ...

  5. Exp1 PC平台逆向破解

    本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShell,会返 ...

  6. Java IO系列之三:NIO VS IO

    NIO VS IO NIO: 面向缓存: 非阻塞的: selector IO: 面向流:    阻塞的:     无 JAVA IO Java IO: Reading data from a bloc ...

  7. oracle not in 改为 not exist

    修改前 SELECT pageID, permissionID FROM tableA WHERE userID=#{userID} AND projectCode=#{projectCode} AN ...

  8. <HTML>初识HTML

    最近在阅读Head first HTML and CSS, 写一些笔记.   小知识: 1. 浏览器会忽略HTML文档中的制表符,回车和大部分空格——要用标记 2. WYSIWYG——使得用户在视图中 ...

  9. 深入浅出mybatis之缓存机制

    目录 前言 准备工作 MyBatis默认缓存设置 缓存实现原理分析 参数localCacheScope控制的缓存策略 参数cacheEnabled控制的缓存策略 总结 前言 提到缓存,我们都会不约而同 ...

  10. golang _下划线占位符代替需要释放的资源的问题

    golang中_有两种作用,一种用在import中,比如这样 import _ "github.com/go-sql-driver/mysql" 表示并不需要导入整个包,只是执行这 ...