Javascript 如何在parent'的帮助下查找子元素;裁判?
我需要使用vue的Javascript 如何在parent'的帮助下查找子元素;裁判?,javascript,vue.js,gsap,Javascript,Vue.js,Gsap,我需要使用vue的this.$refs访问项目,但不确定如何实现。我不想为此使用jQuery <template> <div> <svg ref="svgItem"> <path d="M899.33,118.33h-81.7v90.2h-31.3V2.07h31.3v88.5h81.7V2.07h31.29V208.53H899.33Z" /> </svg> </div> </te
this.$refs
访问项目,但不确定如何实现。我不想为此使用jQuery
<template>
<div>
<svg ref="svgItem">
<path d="M899.33,118.33h-81.7v90.2h-31.3V2.07h31.3v88.5h81.7V2.07h31.29V208.53H899.33Z" />
</svg>
</div>
</template>
<script>
import { TimelineLite } from 'gsap';
export default {
mounted() {
const { svgItem } = this.$refs;
const timeline = new TimelineLite();
timeline.to(svgItem, 5, { opacity: 0.3 });
// timeline.to('${svgItem} > path', 5, { opacity: 0.3 }); // something like this :)
},
};
</script>
我有点觉得我可能最终会使用querySelector
,但不确定如何混合和匹配变量和字符串:
const { svgItem } = this.$refs;
const selector = document.querySelector(svgItem > 'path') // something like this :)
const timeline = new TimelineLite();
timeline.to(selector, 5, { opacity: 0.3 }
谢谢。方法
querySelector
也在HTML上。它不仅在文档中提供
const { svgItem } = this.$refs;
const svgPath = svgItem.querySelector('path');
你试过这个吗。$refs.svgItem
const { svgItem } = this.$refs;
const svgPath = svgItem.querySelector('path');