Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>TodoList</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
</head>
<body>
  <div id="root">
    <div>
      <input v-model="inputValue"/>
      <button @click="handleSubmit">提交</button>
    </div>
    <ul>
      <todo-item v-for="(item,index) of list" :key="index" :content="item"></todo-item>      <!-- 通过模板使用组件 -->
    </ul>
  </div>
​
  <script>
​
    //注册全局组件
    Vue.component('todo-item',{
      props: ['content'],
      template: '<li @click="handleClick">{{content}}</li>',
      methods: {
        handleClick: function(){
          alert('clicked')
        }
      }
    })
​
    new Vue({
      el: "#root",
      data: {
        inputValue: '',
        list: []
      },
      methods: {
        handleSubmit: function(){
          this.list.push(this.inputValue)
          this.inputValue = ''
        }
      }
    })
  </script>
</body>
</html>
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
evenyaopro
0viewers