案例:Vue.js案例     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta charset="utf-8">
5
<title>Vue 测试实例 - W3xue教程(w3xue.com)</title>
6
<script src="//unpkg.com/vue/dist/vue.js"></script>
7
</head>
8
<body>
9
<div id="app">
10
    <ol>
11
    <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
12
    </ol>
13
</div>
14
15
<script>
16
Vue.component('todo-item', {
17
  props: ['todo'],
18
  template: '<li>{{ todo.text }}</li>'
19
})
20
new Vue({
21
  el: '#app',
22
  data: {
23
    sites: [
24
      { text: 'W3xue' },
25
      { text: 'Google' },
26
      { text: 'Taobao' }
27
    ]
28
  }
29
})
30
</script>
31
</body>
32
</html>