用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> 下面是点击返回的方法 ...
随机推荐
- 【AGC030F】Permutation and Minimum DP
题目大意 有一个长度为序列 \(a\),其中某些位置的值是 \(-1\). 你要把 \(a\) 补成一个排列. 定义 \(b_i=\min(a_{2i-1},a_{2i})\),求有多少种可能的 \( ...
- php Header 函数使用
<?php header('HTTP/1.1 200 OK'); // ok 正常访问 header('HTTP/1.1 404 Not Found'); //通知浏览器 页面不存在 heade ...
- 简易RPC
暴露服务: package com.saiarea; import java.io.ObjectInputStream; import java.io.ObjectOutputStream; impo ...
- 浅析redis缓存 在spring中的配置 及其简单的使用
一:如果你需要在你的本地项目中配置redis.那么你首先得需要在你的本地安装redis 参考链接[http://www.runoob.com/redis/redis-install.html] 下载r ...
- 20175221 《Java程序设计》第8周学习总结
20175221 <Java程序设计>第8周学习总结 教材学习内容总结 第十五章主要内容有:泛型.链表.堆栈.散列映射.树集以及树映射. 泛型: 声明:可以使用class名称<泛 ...
- 第七周博客作业<西北师范大学|李晓婷>
1.助教博客链接:https://home.cnblogs.com/u/lxt-/ 2.本周应批作业0,实批作业0. 3.本周小结:本周我们助教开始准备团队项目题目,下周三之前将会进行作业提交.
- The 19th Zhejiang University Programming Contest - H
Princess Cjb is caught by Heltion again! Her knights Little Sub and Little Potato are going to Helti ...
- docker 基础知识分享ppt
给团队做的docker基础分享ppt, 见下面的附件. https://files.cnblogs.com/files/harrychinese/docker_intro.pptx
- hibernate自定义校验Valid
步骤: 1.定义注解: import javax.validation.Constraint; import javax.validation.Payload; import java.lang.an ...
- docker常用命令总结
1.docker ps 查看当前正在运行的容器 2.docker ps -a 查看所有容器的状态 3.docker start/stop id/name 启动/停止某个容器 4.docker ...