vue获取dom元素的内容
通过ref来获取dom元素在vue官网上对ref的解释ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例当 v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组比如我现在要实现的效果是点击用v-for生成的li ,获取到
·
通过ref来获取dom元素
在vue官网上对ref的解释
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例
当 v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组
比如我现在要实现的效果是点击用v-for生成的li ,获取到该元素的值
首先要获取当前点击的li元素,我们要做的是
1.给dom添加点击事件和ref属性
<li class="sidebar-list" v-for="(item, index) in meunList" @click="setPageMenu(index)" ref="menuItem">
<router-link class="sidebar-a" :to="{ path: item.listLink }" >{{item.listTitle}}</router-link>
</li>
2.然后在点击事件方法中使用ref
setPageMenu(index) {
//这个是获取当前menuItem值,用index来区分当前元素是v-for 产生的数组中的第几个数
let getMenuText = this.$refs.menuItem[index].innerText;
}
更多推荐
已为社区贡献2条内容
所有评论(0)