Question

如何创建Vue.js逻辑来处理具有相同类选择器的所有标记元素？

var dropdown = new Vue({
  el: '.dropdown',
  data: {
    is_open : false
  },
  methods: {
    onClick: function (event) {
      // # toggle the dropdown open/closed state
      // ---
      this.is_open = ! this.is_open;
    },
    mouseLeave: function (event) {
      // # set show of dropdown to false
      // ----
      this.is_open = false;
    }
  }
});

但它仅适用于HTML中的第一个下拉列表，而不适用于第二个下拉列表。

请解释我如何做到这一点。

Answer 1

来自vuejs.org：

Vue.js使用基于DOM的模板。每个Vue实例都与相应的DOM元素相关联。创建Vue实例时，它会在设置必要的数据绑定时递归遍历其根元素的所有子节点。编译View后，它会对数据更改产生反应。

您可以使用Vue组件系统实现此目的请遵循以下示例：

var bs3_dropdown = Vue.extend
({
    props: ['name'],
    replace: true,

    template: '<li class="dropdown" v-class="open : is_open" v-on="mouseleave : mouseLeave"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" v-on="click : onClick">{{ name }} <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <content></content> </ul> </li>',

    data: function () {
        return  {
            is_open: false,
        }
    },

    methods : {
        onClick : function(event) {
            // # toggle the dropdown open/closed state
            // ---
            this.is_open = ! this.is_open;
        },
        mouseLeave : function(event) {
            // # set show of dropdown to false
            // ----
            this.is_open = false;
        }
    },

    created: function () {
        console.log('An instance of MyComponent has been created!')
    }
});

Vue.component('bs3-dropdown', bs3_dropdown);

已满：http://jsfiddle.net/msa965j5/
有一些错误，因为初始HTML

Vue.js - 如何使用相同的选择器处理所有元素？

1 个答案: