Vue框架写代码时原生js获取元素内容的方法

Question

在用vue框架写代码的时候,碰到个问题,想获取其中一个div的内容去做判断,html部分代码如下:

<div class="present" @click="presentClick">
    {{presentContent}}
</div>

js部分代码如下:

presentClick(){
    let a=document.getElementsByClassName('present');
    let presentText=a[0].innerHTML;
    console.log('presentText='+presentText);
    console.log(presentText=='注册');
    if(presentText==='注册'){
        alert(111);
    }else if(presentText==='登录'){
        this.loading=false;
    }
}

思路是去用原生方法查找class的方法找到class为'present'的div，用innerHTML获取该div的内容,在用该内容去做if语句条件的判断,用innerHTML获取出来的内容我将它在控制台console出来,只有两种情况,字符串'注册'或者'登陆',但是我去判断presentText=='注册'或者presentText==='登录'时布尔值为什么始终是false啊？

打印台输出的内容如下,不是太明白是哪里出了问题,想各位看看，为何原因这么判断输出的始终是false或者说我想根据获取到的元素内容来判断,这元素内容我该怎么取?

Answer 1

1. 可以在父节点定义ref="myElement",然后再 vue中，通过 vm.$refs.myElement 获取引用
2. 这样的思路不对，都用上 vue 了，试着用 MVVM 的思路去写，建议多参考官方文档

---

链接：
ref

Answer 2

四周还有空白符呢，presentText.trim() === '注册'

Answer 3

presentText有没有作为data放到数据中呢，让他变成VUE的一部分才能够检测到吧。

Answer 4

注意空白字符, 图上的 明显是有换行且有空格的

"注册 " == "注册"   //结果必然是false

Answer 5

你没有看到console.log('presentText='+presentText);打印出很长吗（这么多空~~~~）？

另外为什么不直接对响应数据presentText进行判断，vue表示你为什么要用他~