1、静态绑定与获取
例:通过ref='demo1'设置dom的ref值,通过this.$refs.demo1或者this.$refs['demo1']获取到该dom元素
<div ref="demo1">demo1</div>
<script>
export default {
name: 'demo',
components: {},
data() {
return {}
},
created() {
},
mounted() {
console.log(this.$refs.demo1)
},
methods: {}
}
</script>
页面控制台输出如下:
2、静态绑定与动态获取(模板字符串)
例:对不同的dom设置了有规律的ref,如ref='area1',ref='area2',可以通过ES6中的模板字符串``获取,字符串中的变量采用${}
<div ref="area1" style="background-color: red"></div>
<div ref="area2" style="background-color: yellow"></div>
<div ref="area3" style="background-color: blue"></div>
export default {
name: 'demo',
components: {},
data() {
return {}
},
created() {
},
mounted() {
for (let i = 0; 1 < 3; i++) {
this.$refs[`area${i + 1}`].style.height = ((i + 1) * 100) + 'px';
}
},
methods: {}
}
页面效果如下:
3、动态绑定与动态获取
对一组可复用的dom,可以通过v-for实现,并动态给ref赋值,dom的获取仍用模板字符串
<!-- :ref="'menuItem'+变量"-->
<div :ref="'menuItem'+index" class="menu_item" v-for="(item,index) in menuData" :key="item.id" @click="clickMenu(index)">
<div class="menu_item_title">
{{item.name}}
</div>
</div>
export default {
name: 'demo',
components: {},
data() {
return {
menuData: [
{id: '0001', name: '菜单一'},
{id: '0002', name: '菜单二'},
{id: '0003', name: '菜单三'},
],
}
},
watch: {},
computed: {},
created() {
},
mounted() {
console.log(this.$refs);
},
methods: {
clickMenu: function (index) {
//this.$refs[`menuItem${index}`]是个数组
console.log("点击了", this.$refs[`menuItem${index}`][0]);
}
}
}
页面效果如下:
由上图可知在v-for中动态定义的ref='menuItem0',ref='menuItem1'等均为数组,获取单个dom元素时需在后方跟上[0]才能获得。
4、ref在vfor中的使用
ref用在v-for内部时通过this.$refs.name获得的为一个数组,可知ref不同于id唯一标识,可以对同类型的dom采用相同的命名,通过vfor的下标获得具体指向的dom元素
<!-- ref='menuItem'-->
<div ref="menuItem" class="menu_item" v-for="(item,index) in menuData" :key="item.id"
@click="clickMenu(index)">
<div class="menu_item_title">
{{ item.name }}
</div>
</div>
export default {
name: 'demo',
components: {},
data() {
return {
menuData: [
{id: '0001', name: '菜单一'},
{id: '0002', name: '菜单二'},
{id: '0003', name: '菜单三'},
],
}
},
watch: {},
computed: {},
created() {
},
mounted() {
console.log(this.$refs);
},
methods: {
clickMenu: function (index) {
//this.$refs['menuItem'][0]、this.$refs['menuItem'][1]、this.$refs['menuItem'][2]分别对应页面三个dom
console.log("点击了下标:" + index, this.$refs['menuItem'][index]);
}
}
}
页面效果如下