javascript - 一个Vue实例可以绑定多个element吗

问题描述

问 题

比如官方入门例子里，如果我有两个list放在两个不同的element里边，他们的数据保存在一个data json里，但是一个Vue实例貌似只能绑定一个el，难道要实例化两个Vue？

HTML:

<div id="app">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>
</div>

JS:

new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})

解决方案

假设html如下：

<div id="app">
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>

  <ul class="list2">
    <li v-for="item in items">
      {{ item.text }}
    </li>
  </ul>
</div>

javascript如下：

new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ],
    items: [
      { text: 'Learn React' },
      { text: 'Learn Angular.js' },
      { text: 'Build Something Cool!' }
    ]
  }
})

所以你的问题是，没理解数据驱动什么意思吧？入口只绑定#app就好了，剩下的靠数据驱动UI就好了。

这篇关于javascript - 一个Vue实例可以绑定多个element吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！