用Vue制作记事本

记事本"/>

用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=".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程序如下

<span @click="remove(index)" id="x">x</span>

js程序如下

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

v-on可以简写为@，绑定一个点击事件，然后此处应用splice来完成这个remove函数。

3、第三部分就是统计。可以看到效果图左下角有一行字：共计2条笔记。目的为了统计一共有多少条笔记，此部分应用v-text来完成，html程序如下

<span id="note">共计<strong>{{ list.length }}</strong>条笔记</span>

直接使用list.length便可以知道有多少条笔记了。

4、第四部分就是清空。可以看到效果图右下角有一个清空键，目的是点击该按钮便可以全部清空，而不用一条条去删除，此部分应用v-on来完成，html程序如下

<span @click="clear" id="Clear">清空</span>

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