用Vue制作記事本

先放個效果圖吧

制作記事本一共分為五個部分。

1、第一部分就是添加内容。目的是輸入内容後按下enter能夠在目錄下出現對應的内容，此部分應用v-for，v-model以及v-text完成，html程式如下

<div id="app">
    <input id="text" type="text" v-model="addValue" @keyup.enter="add" placeholder="請輸入内容">
    <ul>
        <li v-for="(item,index) in list" id="List">
            <span id="text2">{{ index+1 }}.{{ item }}</span>
            <span id="x">x</span>
        </li>
    </ul>
</div>
           

js程式如下

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            list: ["吃飯"],
            addValue: "睡覺"
        },
        methods: {
            add: function () {
                this.list.push(this.addValue);
            }
        }
    })
</script>
           

首先是給li标簽中添加一個v-for，然後其中的span标簽中的内容應用v-text來書寫，此處是用的內插補點表達式{{ }}。

然後為了同步使用者輸入的内容，此處應用v-model來完成，添加一個add函數，用push便可以做到。

2、第二部分就是删除内容。目錄中的每一條内容後面都有一個"x"，點選便可以删除該條内容，此部分應用v-on來完成，html程式如下

js程式如下

remove: function (index) {
    this.list.splice(index, 1);
},
           

v-on可以簡寫為@，綁定一個點選事件，然後此處應用splice來完成這個remove函數。

3、第三部分就是統計。可以看到效果圖左下角有一行字：共計2條筆記。目的為了統計一共有多少條筆記，此部分應用v-text來完成，html程式如下

直接使用list.length便可以知道有多少條筆記了。

4、第四部分就是清空。可以看到效果圖右下角有一個清空鍵，目的是點選該按鈕便可以全部清空，而不用一條條去删除，此部分應用v-on來完成，html程式如下

js程式如下

clear: function () {
    this.list = [];
}
           

首先是綁定一個點選事件，然後定義一個clear函數，清空的話就是令list裡面變為空就可以了。

5、第五部分就是隐藏。當每一條筆記都删除完後，最下面的“共計x條筆記”和“清空”這一行字可以隐藏起來，此部分應用v-show來完成，html程式如下

<span v-show="list.length!=0" id="note">共計<strong>{{ list.length }}</strong>條筆記</span>
<span v-show="list.length!=0" @click="clear" id="Clear">清空</span>
           

當list中的長度不為0，即list中有内容時，這一行字将會顯示，否則就不顯示。

Vue的部分做完了，剩下的就是css調樣式了，此處就直接給程式了

#app {
    width: 350px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    box-shadow: 10px 10px 5px gray;
}

#text {
    margin-top: 10px;
    margin-left: 40px;
    width: 300px;
    height: 50px;
    font-size: 30px;
    background-color: #f5f5f5;
    border: 0px;
    border-bottom: 1px solid #ccc;
}

#List {
    width: 300px;
    height: 30px;
    font-size: 16px;
    margin-top: 10px;
    border-bottom: 1px solid #ccc;
    list-style: none;
    position: relative;
}

#text2 {
    display: inline-block;
    width: 270px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#x {
    position: absolute;
    right: 10px;
    cursor: pointer;
}

#note {
    margin-left: 40px;
}

#Clear {
    margin-left: 175px;
    cursor: pointer;
}