vue获取dom元素值

1、通过refs来获取dom元素内容
2、需要利用到jq,但是不支持,学习vue.js,都说需要抛弃jq,否则会禁锢你的思想


通过refs方法

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例。这里主要是介绍在普通dom元素上使用。看下面的例子:

无论是点击aa还是bb都能获取到类名为aa的元素值。

HTML

<div id="App">
     <div class="aa" ref="menuItem" @click="aa($event)">aa</div>
     <div @click="bb">bb</div>
</div>

JS

<script>
     new Vue({
          el: '#App',
          methods: {
               bb: function() {
                    var getMenuText = this.$refs.menuItem.innerText;
                    console.log(getMenuText);//aa
               },
               aa: function(e) {
                    var el = e.target;
                    console.log(el);//<div class="aa">aa</div>
               }
          }
     })
</script>

通过jq方式

个人见解:两种方式并用,感觉有点冗余。话不多说,看上面的例子,aa的点击事件

var el = e.target;// 当前元素,可修改(利用jq,可获取到他的子元素)
var el = e.currentTarget; //当前元素,不可修改(不能用此方法获取到他的子元素)
### 如何在 UniApp Vue 项目中获取 DOM 元素 #### 使用 `getCurrentInstance` 和 `createSelectorQuery` 对于希望在 UniApp Vue 项目中获取 DOM 元素的情况,推荐采用如下方法: - **通过 getCurrentInstance 获取当前实例** 由于子组件实例不再直接暴露给全局或父组件,需借助 `getCurrentInstance()` 函数获得当前组件实例。这有助于更精确地控制和管理组件间的交互以及确保跨平台的一致性[^2]。 ```javascript import { getCurrentInstance } from 'vue'; export default { setup() { const instance = getCurrentInstance(); // 进一步处理逻辑... } } ``` - **利用 createSelectorQuery 查询特定范围内的元素** 为了限定查询作用域并提高效率,可调用 `uni.createSelectorQuery().in(instance)` 来创建一个仅限于指定上下文的选择器查询对象。此方式特别适用于复杂应用结构下的精准定位需求。 ```javascript const query = uni.createSelectorQuery().in(this); query.select('.target-class').boundingClientRect((rect) => { console.log('目标元素的位置信息:', rect); }).exec(); ``` #### 处理特殊场景:小程序环境下获取 DOM 考虑到微信小程序的独特架构及其对传统 Web API 的支持程度有限,在某些情况下可能遇到难以直接访问真实 DOM 节点的问题。此时建议采取间接手段实现相同目的,比如使用虚拟列表代替实际 DOM 操作,或是探索其他适合移动开发的技术方案[^4]。 例如,当尝试将页面转换成图像时遇到了障碍,则应考虑寻找专门针对小程序优化过的库或插件作为替代选项[^5]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值