<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. shiro多Realm第一次调用不生效问题

    1. 由于最近自己写的一个项目上用到了多realm的使用,遇到了一个这样的问题: 1. 自己继承了BasicHttpAuthenticationFilter,实现了获取token,然后直接请求api的 ...

  2. vue中的computed(计算属性)和watch(监听属性)的特点,以及深度监听

    //计算属性是根据data中已有的属性,计算得到一个新的属性, <div>全名:{{fullName}}</div> 创建计算属性通过computed关键字,它是一个对象 计算 ...

  3. 你值得拥有的Mac PS滤镜插件和特效处理软件合集,不要错过!

    以下几款是Mac上强大的Photoshop滤镜插件和特效,可以让我们更加高效率的使用PS,设计和处理出精美的图片. 1. Alien Skin Eye Candy Eye Candy是一款强大酷炫的P ...

  4. maven的安装教程

    一.准备工作  1.确定电脑上已经成功安装jdk7.0以上版本                 2.win10操作系统                 3.maven安装包            下载 ...

  5. 常见的数据扩充(data augmentation)方法

    G~L~M~R~S 一.data augmentation 常见的数据扩充(data augmentation)方法:文中图片均来自吴恩达教授的deeplearning.ai课程 1.Mirrorin ...

  6. google搜索指南

    常用搜索技巧 搜索社交媒体@ @twitter 搜索特定价格$ $400 搜素标签# #tag 排除特定词,在词前加减号- -except 搜索完全匹配词,加双引号"" " ...

  7. Gradle创建项目(IntelliJ IDEA)

    创建Gradle项目 步骤一: 步骤二: 步骤三: 步骤四: 步骤五: 此时, 项目已经建好, 如果是第一次使用, 或者本地没有该版本的Gradle时, 就会触发下载.如图所示. 点击红色方框中标识的 ...

  8. mysql的order by注入

    最近在做一些漏洞盒子后台项目的总结,在盒子众多众测项目中,注入类的漏洞占比一直较大.其中Order By注入型的漏洞也占挺大一部分比例,这类漏洞也是白帽子乐意提交的类型(奖金高.被过滤概览小).今天给 ...

  9. springMVC2

    一.视图解析流程 springMVC中视图解析器 1.视图最终的页面渲染.view视图来做,render 2.跳转到目标视图,请求转发. 3.遍历视图解析器,逻辑视图转换为物理视图. 1)视图 视图的 ...

  10. js变量类型和计算

    # js入门基础-变量类型和计算 ` --首先由于我使用了一个不太合格的markdown来编写来文章,所以在移动端阅读不要太方便,建议移动端使用横屏模式或pc端阅读,当然如果你有平板那是最好的. -- ...