首页 > 一个Vue实例可以绑定多个element吗

一个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就好了。

【热门文章】
【热门文章】