用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;
}