模板参考

阅读24189

更新时间2025-08-22

HTTP 请求

生命周期钩子

从 '$refs' 获取输入值

我们可以进一步研究添加到 $refs 对象的 HTML 元素，以访问我们想要的任何属性。

示例

<p> 元素获取与输入字段中写入的内容相同的内容。

App.vue:

<template>
  <h1>示例</h1>
  <p>开始在输入元素内写入，文本将通过使用"$refs"对象复制到最后一段。</p>
  <input ref="inputEl" @input="getRefs" placeholder="Write something..">
  <p ref="pEl"></p>
</template>

<script>
  export default {
    methods: {
      getRefs() { 
        this.$refs.pEl.innerHTML = this.$refs.inputEl.value;
      }
    }
  };
</script>

运行示例 »

'ref' 与 v-for

使用 v-for 创建的带有 ref 属性的 HTML 元素将作为数组添加到 $refs 对象中。

示例

该按钮显示作为数组元素存储在 $refs 对象内的第三个列表元素。

App.vue:

<template>
  <h1>示例</h1>
  <p>单击该按钮可显示作为数组元素存储在 $refs 对象中的第三个列表元素。</p>
  <button @click="getValue">获取第3个列表元素</button><br>
  <ul>
    <li v-for="x in liTexts" ref="liEl">{{ x }}</li>
  </ul>
  <pre>{{ thirdEl }}</pre>
</template>

<script>
  export default {
    data() {
      return {
        thirdEl: ' ',
        liTexts: ['Apple','Banana','Kiwi','Tomato','Lichi']
      }
    },
    methods: {
      getValue() { 
        this.thirdEl = this.$refs.liEl[2].innerHTML;
        console.log("this.$refs.liEl = ",this.$refs.liEl);
      }
    }
  };
</script>

<style>
pre {
  background-color: lightgreen;
  display: inline-block;
}
</style>

运行示例 »

Vue 练习

通过练习测试自己

练习题:

Refs 用于引用特定的 DOM 元素。

提供缺失的代码，以便在安装应用程序时在第二个 <p> 标签中显示"Hello World"。

<template>
  <p>这仅仅是一些文字。</p>
  <p >这是最初的文字</p>
</template>

<script>
  export default {
    mounted() {
      this..pEl.innerHTML = "Hello World!";
    }
  };
</script>

HTTP 请求

生命周期钩子

RELATED VIDEOS