vue.js入門無法正常工作

我第一次嘗試vue.js和初學JavaScript程序員。我經歷的vue.js getting started page vue.js入門無法正常工作

我的HTML代碼是：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>React Tutorial</title> 
     <script src="bower_components/vue/dist/vue.js"></script> 
     <script src="js/myVue.js"></script> 
    </head> 
    <body> 
     <div id="demo"> 
      <h1>&#123;&#123;title | uppercase&#125;&#125;</h1> 
      <ul> 
       <li 
        v-for="todos" 
        v-on="click: done = !done" 
        class="&#123;&#123;done ? 'done' : ''&#125;&#125;"> 
        &#123;&#123;content&#125;&#125; 
       </li> 
      </ul> 
     </div> 
    </body> 
</html>

和myVue.js文件

window.onload = function() { 
    var demo = new Vue({ 
     el: '#demo', 
     data: { 
      title: 'todos', 
      todos: [ 
       { 
        done: true, 
        content: 'Learn JavaScript' 
       }, 
       { 
        done: false, 
        content: 'Learn Vue.js' 
       } 
      ] 
     } 
    }); 
}

入門代碼是舊的，因爲V-重複了請予以折舊並換成v-for。當我使用v-for時，我得到警告「v-for中需要別名」。我也得到一個遺漏的類型錯誤「無法讀取屬性‘的未定義打造’

的的jsfiddle代碼也不起作用

來源

2016-01-22 Doug Smith

v-for requires alias意味着你必須命名變量在for循環，像這樣：。

<li 
    v-for="todo in todos" 
    @click="todo.done = !todo.done" 
    v-bind:class="{'done' : todo.done}"> 
    {{todo.content}} 
</li>

來源

2016-01-22 07:47:24 Jeff

謝謝，這是有效的。 –

vue.js入門無法正常工作

回答

相關問題