vue3 标签的ref属性获取值，修改样式

最新推荐文章于 2024-07-08 11:00:12 发布

前端小云儿

最新推荐文章于 2024-07-08 11:00:12 发布

阅读量865

点赞数

分类专栏： vue3知识点文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/jieweiwujie/article/details/136710305

版权

vue3知识点专栏收录该内容

65 篇文章 2 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了在Vue3中如何利用ref属性来获取和修改组件或元素的值与样式，详细阐述了ref的声明、响应式更新及在模板和JavaScript中的用法。

摘要由CSDN通过智能技术生成

<template>
  <div>标签的ref属性 获取值，修改样式</div>
  <h3>中国1</h3>
  <h3 ref="title2">中国2</h3>
  <h3>中国3</h3>
  <div><el-button @click="clicksum1">获取title2的值</el-button></div>
</template>
<script setup>
import { ref } from 'vue'
//1 用来创建存储创建的标签
let title2 = ref()

function clicksum1() {
  console.log(title2.value) //2 获取到dom元素
  console.log(title2.value.innerText) //获取值
  title2.value.style.color = 'red' //修改样式
}
</script>
<style scoped>
.flex {
  display: flex;
  align-items: center;
}
</style>