<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. 【WC2019】数树 树形DP 多项式exp

    题目大意 有两棵 \(n\) 个点的树 \(T_1\) 和 \(T_2\). 你要给每个点一个权值吗,要求每个点的权值为 \([1,y]\) 内的整数. 对于一条同时出现在两棵树上的边,这条边的两个端 ...

  2. centos7使用kubeadm安装部署kubernetes 1.14

    应用背景: 截止目前为止,高热度的kubernetes版本已经发布至1.14,在此记录一下安装部署步骤和过程中的问题排查. 部署k8s一般两种方式:kubeadm(官方称目前已经GA,可以在生产环境使 ...

  3. Linux-I/O重定向和管道

    Linux I/O重定向 标准输入(stdin):文件描述符0 标准输入(stdout):文件描述符1 标准错误(stderr):文件描述符2 file descriptors(FD,文件描述符 或 ...

  4. logback输出json格式日志(包括mdc)发送到kafka

    1,pom.xml <!-- kafka --> <dependency> <groupId>com.github.danielwegener</groupI ...

  5. SpringBoot文件上传(MVC情况和webFlux情况)

    MVC情况 引入依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=" ...

  6. 解决input框自动填充为黄色的问题

    题原因:input 框会自动填充一个颜色  如图所示  解决方法 :通过动画去延迟背景颜色的显示  代码如下 input:-webkit-autofill, textarea:-webkit-auto ...

  7. spring Boot 入门--为什么用spring boot

    为什么用spring boot 回答这个问题不得不说下spring 假设你受命用Spring开发一个简单的Hello World Web应用程序.你该做什么? 我能想到一些 基本的需要.  一个项目 ...

  8. nginx日志格式定义和nginx.conf配置模板说明

    在http的功能里添加log_format模块,内容如下: log_format main escape=json '{ "@timestamp": "$time_iso ...

  9. python11 函数的定义,调用,分类

    ## 复习 #一.什么是函数:具体特定功能的代码块 - 特定功能代码块作为一个整体,并给该整体命名,就是函数 # 二.函数的优点:# 1.减少代码的冗余# 2.结构清晰,可读性强# 3.具有复用性,开 ...

  10. numpy&pandas补充常用示例

    Numpy [数组切片] In [115]: a = np.arange(12).reshape((3,4)) In [116]: a Out[116]: array([[ 0, 1, 2, 3], ...