vue的todolist -- 增刪改查

時間 2019-11-09

標籤 vue todolist 增刪简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <title>Document</title>
  <style>
    .gray {
    opacity: 0.7;
  }
  </style>
</head>

<body>
  <div id="app">
    <input type="text" v-on:keyup.enter="addItem" v-model="itemLabel">
    <ul>
      <li :class="item.check ? 'gray' : ''" v-for="(item, index) in items">
        <input type="checkbox" v-model="item.check">
        <span v-if="!item.isEdit">{{item.label}}</span>
        <input v-else type="text" v-model="item.label"  v-on:keyup.enter="item.isEdit = !item.isEdit">
        <button v-on:click="delItem(index)">X</button>
        <button v-on:click="item.isEdit = !item.isEdit">eidt</button>
      </li>
    </ul>
  </div>
  <script>
    window.onload = function () {
      var app = new Vue({
        el: '#app',
        data: {
          itemLabel: '',
          items: [{
            label: 'a',
            check: true,
            isEdit: false
          }, {
            label: 'b',
            check: false,
            isEdit: false
          }, ]
        },
        methods: {
          addItem: () => {
            app.items.push({
              label: app.itemLabel,
              check: false,
              isEdit: false
            })
            app.itemLabel = ''
          },
          delItem: (index) => {
            app.items.splice(index, 1)
          }
        },
      })
    }
  </script>
</body>

</html>

無需編譯，直接可打開運行的vue框架下的todolisthtml

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。