Vue.js "选择器"的问题

问题描述

问 题

哈，实在不知道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做个适配都改一遍？

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

解决方案

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

<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>

这篇关于Vue.js "选择器"的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！