Vue.js "选择器"的问题

Question

哈，实在不知道vue.js该怎么叫，就用了JQuery里的选择器来问。

比如有个DIV如下：

<div ref="divGenres">
    <a class="haha" data-value="1">link</a>
    <a class="haha" data-value="2">link</a>
    <a class="haha" data-value="3">link</a>
</div>

vuejs里，我该怎么写来获取ref="divGenres"的div里所有class="haha"的a里的data-value值呢？ 前提是这些a不是双向绑定的，没有对应的数据模型。

简单的说我想获取上面代码里所有的data-value值，拼成个字符串。

该怎么写？ 实在搞不定我就得先用JQuery来实现了，着急。

---

我觉着技术不就是为需求服务的吗，干嘛一味追求单纯用某个东西。不需要绑定数据模型，偏给它绑定一个那不是多余吗。况且还有一些第三方的JS库，难道都为了VUE做个适配都改一遍？

我先掺和着用，哈哈，也许现在太菜了。

Answer 1

不知道你说的是这个意思吗：

<div id="app">
    <div ref="divGenres">
        <a class="haha" data-value="1">link</a>
        <a class="haha" data-value="2">link</a>
        <a class="haha" data-value="3">link</a>
    </div>
    <p>{{ string }}</p>
</div>
<script>
"use strict"
const app = new Vue({
    el: '#app',
    data: {
        string: '',
    },
    mounted: function () {
        let els = this.$refs.divGenres.querySelectorAll('a.haha');
        for (let i = 0; i < els.length; i++) {
            this.string += els[i].getAttribute('data-value');
        }
    },
});
</script>

Answer 2

用 VanillaJS 即可：

this.$refs.divGenres.querySelector('.haha').dataset.value

Answer 3

可以混着用啊，等用熟了，自然就抛弃jq的思维了，一切以业务为前提。

Answer 4

只好用JQuery来实现了，很简单。

 

  idsGenres = [];

  $("div#divGenres .transition.visible").each(function(){
    
    ID =$(this).attr('data-value'); 
   
   if(ID != undefined)
   {
     idsGenres.push(ID);
   }

  }); 

  console.log(idsGenres); 

Answer 5

学了vue或许不应该再用jquery的思维方式思考，那还不如用jquery