Vue實(shí)現(xiàn)記事本功能實(shí)例

這篇文章主要講解了“Vue實(shí)現(xiàn)記事本功能實(shí)例”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Vue實(shí)現(xiàn)記事本功能實(shí)例”吧！

本文實(shí)例為大家分享了Vue實(shí)現(xiàn)記事本功能的具體代碼，供大家參考，具體內(nèi)容如下

實(shí)例功能點(diǎn)不多，主要難點(diǎn)在于筆記文本對(duì)象數(shù)組的添加，刪除，以及對(duì)組件的綁定同步事件。

核心代碼

<section id="todoapp">
      <!-- 輸入框 -->
      <header class="header">
        <h2>記事本</h2>
        <input
                v-model="note"
          autofocus="autofocus"
          autocomplete="off"
          placeholder="請(qǐng)輸入任務(wù)"
          class="new-todo"
        />
        <div >
          <button value="記錄"  @click="addnote">記錄</button>
        </div>

      </header>
      <!-- 列表區(qū)域 -->
      <section class="main">
        <ul class="todo-list">
          <li class="todo" v-for="(n,index) in notes">
            <div class="view">
              <span class="index">{{index+1}}</span> <label>{{n}}</label>
              <button class="destroy"></button>
            </div>
          </li>

        </ul>
      </section>
      <!-- 統(tǒng)計(jì)和清空 -->
      <footer class="footer">
        <span class="todo-count"><strong>{{notes.length}}</strong> items left </span>
        <button class="clear-completed" @click="delnote">
          Clear
        </button>
      </footer>
    </section>
      <script>
      let vue = new Vue({
        el:"#todoapp",
        data:{
          note:"好好學(xué)習(xí)，天天向上",
          index:0,
          notes:[
                  "寫代碼",
                  "吃飯飯",
                  "睡覺覺"
          ]
        },
        methods:{
          addnote:function () {
            this.notes.push(this.note);
          },
          delnote:function () {
            this.notes = [];
          }
        }
      });
</script>

感謝各位的閱讀，以上就是“Vue實(shí)現(xiàn)記事本功能實(shí)例”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)Vue實(shí)現(xiàn)記事本功能實(shí)例這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！