前端学习(2692):重读vue电商网站13之使用动态编辑标签

 

实现效果如下:


通过 v-if 的 boolean值来动态变化是否显示文本框还是 button 按钮。通过 v-model 双向绑定来实现文本框内容的监听。

由于每一行需要设置文本框的显示与隐藏,而且数据是共享的。我们需要通过 scope来获取每一行的值来进行绑定,不然的话,就会导致某个文本框显示了,其它文本框也跟着显示,并且数据是共用的,都会同步变化。而设置 scope后,我们就能实现对一行数据进行更新渲染了。

为了实现当我们点击按钮后,让本文看自动获取焦点。

通过 this.$refs.saveTagInput.$refs.input.focus() 来获取 input 的 dom 对象,接着调用 focus函数来获取焦点。

$nextTick 作用是当页面元素被重新渲染之后才会执行回调函数中的代码。如果不这样做的话,我们直接通过点击按钮的形式,将该行的 inputVisible 设置为了 true,那么此时直接调用 this.$refs.saveTagInput.$refs.input.focus() 是没办法获取焦点的,此时就会报错。因为我们的 dom节点还没有进行渲染,而先调用 $nextTick 就是为了等待 dom节点渲染之后,我们再获取 input,然后再调用 focus 函数来获取焦点。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/414914.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++ 宏、范型和RTTI 浅析

【摘要】 RTTI(Run-Time Type Identification)是面向对象程序设计中一种重要的技术。现行的C标准对RTTI已经有了明白的支持。只是在某些情况下出于特殊的开发须要,我们须要自己编码来实现。本文介绍了一些关于RTTI的基础知识及其原理和实现,并分析…

宝塔面板解决跨域

1、找到宝塔面板配置nginx文件的地方 2、增加如下代码 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods POST,PUT,GET,DELETE; add_header Access-Control-Allow-Headers version, access-token, user-token, Accept, apiAuth, User-Agent…

Android 底部上拉抽屉view

module链接:https://download.csdn.net/download/meixi_android/10839835 接入module方法:https://blog.csdn.net/meixi_android/article/details/84655666 1、activity实现步骤 layout文件布局——DrawerLayoutContent_ID是抽屉内容id,dra…

前端学习(2693):重读vue电商网站14之步骤条的使用与美化

以下就是步骤条使用的核心代码&#xff0c;其中 active 绑定的是每一个 step 的下标&#xff0c;默认从 0 开始。其次&#xff0c;我们可以设置 aligin-center 属性来让我们的步骤条进行居中。el-step就是每一个步骤进度。 Javascript <!-- 步骤条区域 --> <el-steps…

启动项目时,运行其他方法

最近转学java&#xff0c;记录点滴 Component public class Test implements ApplicationRunner {Overridepublic void run(ApplicationArguments args) throws Exception {System.out.println("1234");} }主要是继承ApplicationRunner,并实现run方法

BOM--window对象

BOM 的核心对象是window&#xff0c;它表示浏览器的一个实例。在浏览器中&#xff0c;window 对象有双重角色&#xff0c;它既是通过JavaScript 访问浏览器窗口的一个接口&#xff0c;又是ECMAScript 规定的Global 对象。这意味着在网页中定义的任何一个对象、变量和函数&#…

Android 固定式底部上滑抽屉view

1、自定义view BottomDrawerLayout /*** 作者&#xff1a;created by meixi* 邮箱&#xff1a;15913707499163.com* 日期&#xff1a;2018/12/10 11*/public class BottomDrawerLayout extends ViewGroup {private static final String TAG "BottomDrawerLayout";p…

前端学习(2694):重读vue电商网站15之阻止页签tabs切换

主要函数如下&#xff1a; 在我们的 tabs 标签页添加一个 before-leave 函数 然后在 methods 中定义&#xff0c;根据第一个标签页的逻辑来阻止标签页的切换。

vscode中vue3项目vetur报错

vue3支持的插件应该是volar&#xff0c;之前有老的vue2项目插件vetur&#xff0c;所以会报错。 解决办法&#xff1a;在项目中新建.vscode, 新建文件settings.json,里面内容如下&#xff1a; {"vetur.validation.template": false,"vetur.validation.script&qu…

Android 侧滑多层view显示

侧滑module链接&#xff1a;https://download.csdn.net/download/meixi_android/10840271 引用方法 只需layout布局文件引用即可——第一个LinearLayout是底层view&#xff0c;第二个LinearLayout是上层view&#xff0c;侧滑即可显示底层view <com.daimajia.swipe.SwipeL…

MySQL的btree索引和hash索引的区别

MySQL的btree索引和hash索引的区别ash 索引结构的特殊性&#xff0c;其检索效率非常高&#xff0c;索引的检索可以一次定位&#xff0c;不像B-Tree 索引需要从根节点到枝节点&#xff0c;最后才能访问到页节点这样多次的IO访问&#xff0c;所以 Hash 索引的查询效率要远高于 B-…

vue2 vite antd vue 配置组件按需加载

1、安装vite-plugin-importer 2、配置vite.config.ts文件 import { fileURLToPath, URL } from url import { defineConfig } from vite import vue from vitejs/plugin-vue import vueJsx from vitejs/plugin-vue-jsx import usePluginImport from vite-plugin-importerexpo…

Android QQ登录集成

1、首先到腾讯开放平台创建应用&#xff0c;并上线——使用有效APP ID才可以进行qq登录 腾讯开放平台&#xff1a;https://open.tencent.com/ 上线后APP ID 2、下载腾讯sdk&#xff1a;https://download.csdn.net/download/meixi_android/10842092 3、activity代码详情&#…

前端学习(2695):重读vue电商网站16之Upload 上传组件

通过点击或者拖拽上传文件 Js <!-- action表示图片上传后台api地址 --> <el-upload:action"uploadURL":on-preview"handlePreview":on-remove"handleRemove"list-type"picture" ><el-button size"small" typ…

ajax 跨域

ajax跨域的原理 ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”,可以参考 浏览器同源政策及其规避方法 CORS请求原理 CORS是一个W3C标准&#xff0c;全称是"跨域资源共享"&#xff08;Cross-origin resource sharing&#xff09;。它允许浏览器向跨…

vue3使用process报错Uncaught ReferenceError: process is not defined

我习惯于在config中根据process判断打包状态。这次升级到vue3遇到报错。 解决方案&#xff0c;还是配置一下vite.config.json。 增加如下配置即可。 export default defineConfig({// ...define: {process.env: process.env} })

左右滑动实现activity之间的跳转

首先来看一下实现效果 1. BaseActivity extends Activity 首先&#xff0c;由于activity类之间存在很多共性 &#xff0c;比如跳以及滑动等事件&#xff0c;所以需要抽象出一个父类来&#xff0c;简化代码量。 附代码&#xff1a; /*** 按照1、2、3的步骤走* / public abstr…

vue3 watch props 监听属性变化

我的需求是弹出一个模态框。使用visible控制隐藏与现实&#xff0c;需要watch&#xff0c;visible变化&#xff0c;执行其他相关操作。 核心代码如下&#xff1a; import { watch, toRefs } from "vue"; const props defineProps({visible: {type: Boolean,default…

Android 调用原生API获取地理位置和经纬度,判断所在国家

public static boolean isCN(Context context) {TelephonyManager tm (TelephonyManager) context.getSystemService(Context.TELEPHONY_SERVICE);String countryIso tm.getSimCountryIso();boolean isCN false;//判断是不是大陆if (!TextUtils.isEmpty(countryIso)) {count…