vue获取dom元素的内容
通过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;
}
vue获取dom元素的内容相关推荐
- Vue笔记四:Vue获取DOM元素和组件元素的方法
文章目录 Vue获取组件元素 ref获取组件元素 Vue获取组件元素 如果想使用哪个DOM元素,就给它加上ref属性,然后用$refs属性获取它的元素对象,示例如下: 全部代码: <!DOCTY ...
- Vue获取DOM元素并修改属性
Vue获取DOM元素 Vue获取DOM元素有两种方法 直接给相应的元素加id,然后再使用document.getElementById("id");获取 使用ref,给相应的元素加 ...
- Vue 获取DOM元素 ,给DOM增加事件的特殊情况
Vue 获取DOM元素 ,给DOM增加事件的特殊情况 给标签绑定ref属性 使用this.$refs.xxx 获取原生的jsDOM对象 ref属性值不能重名 Vue.component('subCom ...
- 八.vue获取dom元素
vue获取dom元素 方法一:直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二:使用ref,给相应的元 ...
- vue获取dom元素值
1.通过refs来获取dom元素内容 2.需要利用到jq,但是不支持,学习vue.js,都说需要抛弃jq,否则会禁锢你的思想 通过refs方法 ref 被用来给元素或子组件注册引用信息.引用信息将会注 ...
- vue获取dom元素注意问题
mounted(){setTimeout(()=>{this.contentToggle();},1000)},methods:{contentToggle(){console.log(this ...
- ref 引用(vue获取DOM元素)
ref 引用 jquery 牛逼 简化了程序员操作DOM的过程 vue 优势: MVVM 在 vue 中,程序员不需要操作DOM.只需要把数据维护好!(数据驱动视图) 结论:在 vue 项目,强烈不建 ...
- vue获取dom元素的几种方式
在任意标签上:ref="xx" 获取dom元素:this.$refs.xx. 如图: mounted()时才能获取this.$refs.xx 获取dom标签:this.$refs. ...
- vue获取dom元素与修改样式详解
vue中如何获取dom元素呢? 步骤详解 在标签上加上ref属性 如 : 在js中通过 this.$refs.加ref的值便可以获取dom 如:this.$refs.refDemo 修改对应的样式名 ...
最新文章
- PHP学习笔记-字符串操作2
- shell脚本例子集锦
- linux apr文件解压失败,Linux安装apache服务器遇到的问题
- 每天一道LeetCode-----以字符串的形式输出二叉树所有从根节点到叶子节点的路径
- java testwhileidle_DBCP踩坑(二):连接池检查testWhileIdle失效
- Hihocoer 1336 - Matrix Sum 二维树状数组
- bisect git 使用_Git使用过程中的一些常见场景问题总结
- Educational Codeforces Round 62 (Rated for Div. 2)
- 微信小程序中的空格和换行操作
- AngularJS简单例子
- FTP上传和下载文件名称中文乱码问题
- Incompatible pointer types assigning to ‘id<PHPickerViewControllerDelegate> _Nullable‘ from ‘Class‘
- 尚在人间,何处不青春
- 推出GitLab中国发行版GitLab JH
- 02_Keil5报错 error: #5: cannot open source input file “XXX.h”: No such file or directory解决方法
- Git(5) SourceTree安装使用
- C++ Primer Plus (第六版)编程练习记录(chapter8 函数探幽)
- 高可用架构的技术变迁与演进经历了怎样的过程?
- 东北大学acm暑期夏令营结构体
- 韩顺平视频全集 云盘链接