Question

我是新的VueJS学生，我正在尝试做一个指令，我停下来因为我不知道为什么我无法获得该元素。我做错了什么？我只想获得el元素。

以下是JSFiddle或以下代码。

HTML

<div class="container" id="vue-app">
    <ul>
      <li v-test v-for="item in itens">
        {{item.name}}
      </li>
    </ul>
    <span id="directiveLog"></span>
</div>

JS

Vue.directive('test', {
  inserted: function (el) {
        document.querySelector('#directiveLog').innerHTML = el;
  }
})

new Vue({
    el: '#vue-app',

  data: {
    itens:[
     {name: "hello"},
     {name: "fun"},
     {name: "world"}
   ] 
  }

});

Answer 1

插入函数中的参数'el'（el）{...} - 它是插入v-test的元素。

 Vue.directive('test', {
        inserted: function (el) {
            document.querySelector('#directiveLog').innerHTML = el.innerHTML;
  }
})

new Vue({
    el: '#vue-app',

  data: {
    itens:[
     {name: "hello"},
     {name: "fun"},
     {name: "world"}
   ]
  }

});

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <div v-test class="container" id="vue-app">
                <ul>
                  <li v-for="item in itens">
                    {{item.name}}
                  </li>
                </ul>
                <span id="directiveLog"></span>
            </div>

VueJS 2指令插入事件

1 个答案: