首页 > 其他分享 >vue3 ref 获取单个Dom及多个Dom

vue3 ref 获取单个Dom及多个Dom

时间:2024-02-23 11:33:23浏览次数:34  
标签:itemRef Dom value 获取 state vue3 ref

获取单个Dom

<input type="text" ref="inputRef" />
setup() {
    const inputRef = ref(null)
    onMounted(()=>{
        console.log(inputRef.value);
    })
}

获取多个Dom

<div v-for="(item, index) in state.list" :key="index" :ref="setItemRef">
    {{item}}
</div>

setup() {
    let itemRef = ref([])
    let state = reactive([])
    const setItemRef = (el) => {
        itemRef.value.push(el)
    }
    onMounted(()=>{
        // 模拟调用接口
        setTimeout(()=>{
            state.curMenuList = [1,2,3]
        },1000)
    })
    onBeforeUpdate(() => {
        itemRef.value = [];
    });
    
    onUpdated(()=>{
        itemRef.value.map(d=>{
            d.style.height = '100px'
        })
    })
    return {
        state,
        setItemRef,
    }
}

 


标签:itemRef,Dom,value,获取,state,vue3,ref
From: https://www.cnblogs.com/lftBlogs/p/18029168

相关文章

  • vue3+vite 移动端适配postcss-pxtorem插件
    1、安装插件npmipostcss-pxtorem-D2、与package.json同级目录创建postcss.config.js文件module.exports={plugins:{autoprefixer:{overrideBrowserslist:["Android4.1","iOS7.1",......
  • Web应用_6. Vue3
    title:(在线学习平台)link:(https://www.acwing.com/)cover:(https://cdn.acwing.com/media/activity/surface/log.png)Vue官网1配置环境1.1终端Linux和Mac上可以用自带的终端。Windows上推荐用powershell或者cmd。GitBash有些指令不兼容。1.2安装Nodejs安装地址1......
  • vue3+elment-plus项目,el-diglog的按钮,内部是el-form的子组件,那么保存时,如何触发子组件
    问题:el-diglog的按钮,如何触发内部的form表单提交el-dialog是父组件,cengji是子组件代码如下:<el-dialogv-model="dialogVisible"title="层级结构管理"width="1000"><cengji:tableId="tableId"/><template#footer>......
  • [ARC104E] Random LIS
    题意:数列每个数是在\([1,a_i]\)上均匀随机分布的整数,求其最长上升子序列长度的期望,\(n\le6\)。发现\(n\)很小,考虑\(O(n^n)\)枚举所有数的偏序关系,然后设\(h_i=\min_{rk_j=i}a_j\),\(m=\max_{i=1}^nrk_i\),这样问题就能转化为数列每个数是\([1_i,h_i]\)上均匀随机分布......
  • vue3 ts用正则表达式校验两位小数和校验整数的方法
    <el-col:span="12"><el-form-itemlabel="贷款金额"prop="loanAmount"><el-input-numberv-model="props.loanAmount":min="0"@change="checkIntegerNumber('loanAmount')"controls......
  • 若依+vue3配置菜单后设置缓存但实际上切换页签重复请求接口
    刚接触ruoyi,配置菜单时发现一个问题,配置好了,也设置了缓存,但是切换tab页签还是会重复请求接口,配置如图:仅是举例,如上图,系统管理->角色管理列表配置,路由地址是role,缓存也勾选了,但实际上第一次打开角色管理页签第一次请求了数据,再跳转其他页面,回到角色管理页签时,又一次请求了数据,实......
  • proxy代理里面的Reflect
    Reflect对象经常和Proxy代理一起使用,原因有三点:Reflect提供的所有静态方法和Proxy第2个handle参数方法是一模一样的。Proxyget/set()方法需要的返回值正是Reflect的get/set方法的返回值,可以天然配合使用,比直接对象赋值/获取值要更方便和准确。receiver参数具有不可替代性。......
  • Reflect是什么?
    Reflect是一个内置的JavaScript对象,提供了一组静态方法,这些方法对应于一些操作符,以及一些常见的操作。Reflect对象的方法可以被用来获取对象属性、设置属性、调用函数、构造对象等。以下是一些Reflect对象常用的方法:Reflect.get(target,propertyKey[,receiver]):返回指......
  • vue2.0和vue3.0在同一电脑上运行(超详细步骤)
    由于现在公司项目都是vue2.0项目,个人又需要3.0来学习。所以需要在同一电脑安装两个版本的vue。1.在创建vue2.0和vue3.0两个文件夹,并且局部安装 在vue2文件夹执行命令[email protected](版本根据自身来选择),[email protected]在vue3文件夹执行命令npmin......
  • vue3项目模板:新建一个vite+vue3项目,并做基础化建设
    原文地址:https://blog.csdn.net/weixin_43239880/article/details/130355138新建一个vite+vue3项目,并做基础化建设1.使用npmcreatvite@latest新建一个vue3项目2.生成git仓库3.将prettier的规则加入到eslint中(可选操作,建议有)4.添加commitLint(可选操作,建议有)5.加入UI组件库,以ele......