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

【问题标题】：Vue.js - How to handle all elements with the same selector?Vue.js - 如何使用相同的选择器处理所有元素？
【发布时间】：2015-08-25 14:18:42
【问题描述】：

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

我有这个简单的代码：http://jsfiddle.net/x2spo1qu/

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 中的第一个下拉菜单，不适用于第二个。

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

【问题讨论】：

当问题更明显时，更容易回答问题。这是您的小提琴以简单，切中要害的方式显示您的问题。 jsfiddle.net/pr7h32r5/2 现在，当我们解决这个问题时，您可以将修复应用到您更复杂的示例中。也就是说，我认为你不能让 Vue 使用比元素更多的东西。

标签： javascript vue.js

【解决方案1】：

来自 vuejs.org：

Vue.js 使用基于 DOM 的模板。每个 Vue 实例都与一个对应的 DOM 元素相关联。创建 Vue 实例时，它会递归遍历其根元素的所有子节点，同时设置必要的数据绑定。视图编译完成后，它会响应数据的变化。

您可以使用 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 存在一些错误

【讨论】：