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>
相关推荐
AA-代码批发V哥8 分钟前
Vue框架之钩子函数详解
vue.js
伊成33 分钟前
docker安装Consul笔记
笔记·docker·consul
四季豆豆豆34 分钟前
博客项目 laravel vue mysql 第四章 分类功能
vue.js·mysql·laravel
zstar-_44 分钟前
Claude code在Windows上的配置流程
笔记·算法·leetcode
hi0_62 小时前
03 数组 VS 链表
java·数据结构·c++·笔记·算法·链表
拾光拾趣录2 小时前
Vue中v-if与v-for同元素使用的陷阱
前端·vue.js
Wy. Lsy3 小时前
Kotlin基础学习记录
开发语言·学习·kotlin
The_Killer.3 小时前
格密码--数学基础--06对偶空间与对偶格
学习·线性代数·密码学
Andy杨4 小时前
20250712-1-Kubernetes 监控与日志管理-K8s日志管理与维护_笔记
笔记·容器·kubernetes
撰卢4 小时前
【个人笔记】负载均衡
运维·笔记·负载均衡