一. 操作Dom
步骤:
1.先在setup中第一变量设置为null
2.return出来供模板使用
3.模板中绑定上述返回的数据
二:获取v-for遍历的DOM或者组件
步骤:
1,在组件或者需要遍历的dom上定义一个函数
2.把该函数绑定到ref上(必须是动态绑定)
3.在函数中可以通过参数得到单个元素,这个元素一般都可以放在数组中
4.使用
<template>
<h1>ref</h1>
<div ref="info">hello</div>
<li :ref="setFruits" v-for="item in fruits" :key="item.id">{{item.name}}</li>
<button @click="handlerClick">点击</button>
</template>
<script>
import { ref } from 'vue'
export default {
name: 'App',
setup () {
// 1.先定义ref为null
const info = ref(null)
const fruits = ref([{
id: 1,
name: 'apple'
},
{
id: 2,
name: 'pear'
}
])
const arr = []
const setFruits = function (el) {
arr.push(el)
}
const handlerClick = function () {
console.log(info.value.innerHTML)
}
return { fruits, info, setFruits, handlerClick }
}
}
</script>