Vue学习笔记之模板引用

1、添加模板引用

对DOM元素添加引用,语法格式<input ref="input">,则在DOM元素挂载成功后,可以通过this.$refs.input的语法形式访问引用的input元素。

2、v-for中的模板引用

对列表元素添加引用,语法格式<li v-for="item in list" ref="items"> {{ item }} </li>,则在DOM元素挂载成功后,可以通过this.$refs.items的语法形式访问所有的li元素。

3、函数模板引用

可以对DOM元素添加函数模板引用,则在组件每次更新时自动触发函数执行,语法格式<input :ref="testRef" />,模板函数在methods区域定义。

html 复制代码
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
    <input ref="input" />
    <ul>
        <li v-for="item in list" ref="items">
            {{item}}
        </li>
    </ul>
    <input :ref="testRef" /><br/>
    <input :ref="(el)=>el" /><br />
    <button @click="list.push('hello')">Add</button>
</div>
<script>
    const { createApp } = Vue;
    createApp({
        data(){
            return {
                list:['西瓜','八宝粥','瓜子','123罩']
            }
        },
        methods: {
            testRef(el) {
                alert(el);
            }
        },
        mounted() {
            this.$refs.input.focus();
            this.$refs.input.value = 'hello';
            console.log(this.$refs.items);
        }
    }).mount('#app');
</script>
相关推荐
会写代码的饭桶33 分钟前
Jenkins 实现 Vue 项目自动化构建与远程服务器部署
vue.js·自动化·jenkins
被巨款砸中35 分钟前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
bnsarocket38 分钟前
Verilog和FPGA的自学笔记6——计数器(D触发器同步+异步方案)
笔记·fpga开发·verilog·自学·硬件编程
Purple Coder1 小时前
面试-上海电力大学研一的学习经验
学习
文韬_武略1 小时前
web vue之状态管理Pinia
前端·javascript·vue.js
mosen8681 小时前
【Vue】Vue Router4x关于router-view,transtion,keepalive嵌套写法报错
前端·javascript·vue.js
LK_072 小时前
【Open3D】Ch.3:顶点法向量估计 | Python
开发语言·笔记·python
饮浊酒2 小时前
Python学习-----小游戏之人生重开模拟器(普通版)
python·学习·游戏程序
li星野2 小时前
打工人日报#20251011
笔记·程序人生·fpga开发·学习方法
摇滚侠2 小时前
Spring Boot 3零基础教程,yml配置文件,笔记13
spring boot·redis·笔记