主页 / 问题 / 1058215
Accepted
Proshka
Asked:2020-12-13 19:34:02 +0000 UTC2020-12-13 19:34:02 +0000 UTC

VUE js和这个——如何使用

  • 772

this在对象中创建的函数内部的调用Vue指向“Vue”对象本身。如何引用this发生事件的元素 - 在这种情况下，单击 

<div id="app">
  <div class="menu-item">          
       <div class="item active" v-on:click="menuItem">К</div>
       <div class="item">С</div>
       <div class="item">П</div>
       <div class="item">O</div>
  </div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        methods: {
            menuItem: function (event) {
                let elements = document.querySelectorAll('.menu-item > .item');
                for (let elem of elements) {
                    if(elem.classList.contains('active')){
                        elem.classList.remove("active");
                        console.log(this);
                    }
                }
            }
        }
    })
</script>
javascript

1 个回答

  1. Best Answer

    答案与您的预期有些不同。你不需要访问这个。Vue 是一个数据优先的框架。你改变数据，Vue 渲染它。我们可以:class 在这里更改课程阅读更多

    请注意，Vue 维护 DOM 本身，除非绝对必要，否则不应更改它。

    new Vue({
  el: '#app',
  data() {
    return {
      items: [{
          label: 'К',
          isActive: true
        },
        {
          label: 'С',
          isActive: false
        },
        {
          label: 'П',
          isActive: false
        },
        {
          label: 'О',
          isActive: false
        },
      ]
    }
  },
  methods: {
    menuItem(index) {
      this.$set(this.items[index], 'isActive', !this.items[index].isActive);
    }
  }
})
    .active {
  background-color: coral;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="menu-item">
    <div v-for="(item, index) in items" :key="index" :class="{ active: item.isActive }" class="item" v-on:click="menuItem(index)">{{ item.label }}</div>
  </div>
</div>

    • 3

相关问题