标签的ref属性

最新推荐文章于 2025-03-26 07:30:00 发布

Erick Yu

最新推荐文章于 2025-03-26 07:30:00 发布

阅读量140

点赞数 3

文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/ykrsgs/article/details/136901044

版权

这篇文章介绍了如何在Vue.js中使用`ref`特性来存储和访问DOM元素的值，通过`<template>`和TypeScript(TS)配合，展示了如何在点击事件中打印`ref`所绑定的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div class="person">
      <h2>a</h2>
      <h2 ref="char">b</h2>
      <button @click="showlog">show</button>
      
    </div>
</template>

<script lang="ts" setup name = "Person">
  import { ref } from 'vue'

  let char = ref() // char用来存储ref标记的内容
  
  // function
  function showlog() {
    console.log(char.value)
  }

</script>
  
<style scoped>
  /* 可以添加样式 */
</style>