master

分支 (1)

管理

管理

master

clock
/
vue.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .done{
        color:gray;
        text-decoration: line-through;
      }
    </style>
</head>
<body>

  <div id="app">
    hello {{name}}

    <div>
      <input type="text" v-model="val">
      <button @click="add">新增</button>
      <button @click="clear"> 清除已完成 </button>
      <ul>
        <li v-for="todo in todos"  :class="{done:todo.done}">
          <input type="checkbox" v-model="todo.done">
          {{todo.title}}
        </li>
      </ul>
      <div>
        {{active}} / {{all}}
      </div>
    </div>
  </div>

  <script src="https://unpkg.com/vue@next"></script>
  <script>
    let todos = localStorage.getItem('todos')
    const App = {
      data(){
        return {
          name:'亚瑟',
          val:"",
          todos:todos?JSON.parse(todos) :[
            {title:'吃饭',done:true},
            {title:'睡觉',done:false},
            {title:'打王者',done:false},
          ]
        }
      },
      computed:{
        active(){
          return this.todos.filter(v=>!v.done).length
        },
        all(){
          return this.todos.length
        }
      },
      watch:{
        todos:{
          handler(val){
            localStorage.setItem('todos',JSON.stringify(val))
          },
          deep:true
        }
      },
      methods:{
        add(){
          this.todos.push({
            title:this.val,
            done:false
          })
          this.val = ''
        },
        clear(){
          this.todos = this.todos.filter(v=>!v.done)
        }
      }
    }
    Vue.createApp(App).mount('#app')
  </script>
</body>
</html>