VUE-使用v-for为每一项动态添加ref
功能简介:1、循环显示9项2、点击每一项,每一项字体颜色变蓝,向下和向右分别移动100px关键点:1、使用v-for,循环加载每一项2、使用:ref="`list${i}`" ,为每一项动态添加ref<div id="app"><div class="frame" ref="frame"><div v-for="(...
·
功能简介:
1、循环显示9项
2、点击每一项,每一项字体颜色变蓝,向下和向右分别移动100px
关键点:
1、使用v-for,循环加载每一项
2、使用:ref="`list${i}`" ,为每一项动态添加ref
<div id="app">
<div class="frame" ref="frame">
<div v-for="(item,i) in list" :key="i" @click="changeColor(item,i)" :ref="`list${i}`">{{item}}</div>
</div>
</div>
3、点击事件,使用this.$refs[`list${i}`][0] 获取当前元素dom结构
<script>
var vm = new Vue({
el: '#app',
data: {
list:['1','22','333','4444','55555','666666','7777777','88888888','999999999']
},
mounted() {
this.$refs.frame.style.color='red'
},
methods: {
changeColor(item,i){
debugger
let _y='100px'
let _x='100px'
this.$refs[`list${i}`][0].style.color='blue'
this.$refs[`list${i}`][0].style.transform='translate('+_x+','+_y+')'
}
}
})
</script>
4、dom结构
5、可以添加的style样式汇总,详见https://blog.csdn.net/LzzMandy/article/details/91372903
更多推荐
已为社区贡献32条内容
所有评论(0)