用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的更多相关文章
- bootstrap-table:操作栏点击编辑按钮弹出模态框修改数据
核心代码: columns: [ { checkbox:true //第一列显示复选框 }, ... { field: 'fail_num', title: '失败数' }, { field: 'op ...
- vue点击编辑按钮,内容变成input可以修改,也可以删除
一.效果 图1 图2,点击报错之后,又变成图1的效果 二.使用到了element UI中的以下组件: <el-button> <el-input> 三.使用的关键点是vue中的 ...
- ElementUI table 点击编辑按钮进行编辑实现示例
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <meta nam ...
- Ubuntu 18.04中截图工具Shutter的编辑按钮不可用的解决办法
Shutter是一个由第三方提供的在Ubuntu上运行的截图工具,相对于系统自带的截图工具(默认可通过Ctrl + Shift + Print快捷键启动截图),最大的优点就是可以即时对图片进行编辑,在 ...
- 点击编辑table变为可编辑状态
简单描述:开发中遇到一个小困难,table展示的数据,需要是可编辑的,点击编辑按钮,页面table可以进行编辑,编辑完成后,点击保存数据就保留下来~~~ 思路:用一个带有input的表去替换不带inp ...
- corethink功能模块探索开发(十四)后台编辑按钮
效果图: 1.添加下图55&58行代码 2.实现edit方法 位于Equip/Admin/DeviceRepaireAdmin.class.php中 public function edit( ...
- vue+element-ui 实现table单元格点击编辑,并且按上下左右键单元格之间切换
通过我的测试我发现两个两种方法来编辑单元格的内容 第一种点击编辑: 我是给td里添加一个input,将值赋值给input,当失去焦点的时候将input的值付给td原来的内容,然后将input删除, 代 ...
- asp.mvc中的vue分页实例,分页组件无法重置reload,解决点击查询按钮后,分页不刷新的问题
刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...
- vue 如何点击按钮返回上一页
1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
随机推荐
- Linux keepalived+lvs实现高可用负载均衡
LVS的具有强大的负载均衡功能,但是它缺少对负载层节点(DS)的健康状态检测功能,也不能对后端服务(RS)进行健康状态检测:keepalived是专门用来监控高可用集群架构的中各服务的节点状态,如果某 ...
- mac与windows共享键盘鼠标(synergy)
桌面上有两台电脑, 一台mac一台windows, 由于桌面空间紧张, 放两套键盘鼠标有点浪费空间, 如果能让mac和windows共享键盘鼠标就好了, 经过一番搜寻, 找到了一款名为synergy的 ...
- java强引用 软引用 弱引用 虚引用
https://www.cnblogs.com/yw-ah/p/5830458.html Java四种引用包括强引用,软引用,弱引用,虚引用. 强引用: 只要引用存在,垃圾回收器永远不会回收Objec ...
- Vue学习笔记四:跑马灯效果
目录 跑马灯原理 HTML 箭头函数 计时器 跑马灯效果 跑马灯原理 先讲讲跑马灯的原理,就是一行字,会滚动,思路是这样的,使用substring方法,一个获取字符串的第一个字,一个获取1后面所有的字 ...
- 序列化 反序列化 MessagePack for C#
阅读目录 快速序列化组件MessagePack介绍 简介 使用 快速开始 分析器 内置的支持类型 对象序列化 DataContract兼容性 序列化不可变对象(序列化构造器) 序列化回调 Union ...
- vue md5
安装 cnpm install js-md5 --save 使用 import md5 from 'js-md5' md5('要加密的内容')
- 《Java》第八周学习总结
第八周学习内容:课本第15章节的内容泛型与集合框架 主要内容有 -泛型-链表-堆栈-散列映射-树集-树映射 重点和难点-重点:泛型和集合的使用码云:https://gitee.com/ShengHu ...
- (Python3) 九九乘法表 代码
for i in range(1,10): for j in range(1,10): print(i '*' j '=', i*j)
- XXX系统项目分析
目标: 实现网上需求征集与审核. 好处: (1)网上填报不受时间和地点限制: (2)流程简单明确,节省人力物力: (3)信息存储,查询,筛选远比纸质材料方便: (4)方便统计,分析数据: 度量标准: ...
- JSP/Serlet 使用fileupload上传文件
需要引用的jar commons-fileupload-1.3.1.jar commons-io-2.2.jar index.jsp <body> <center> <h ...