记事本
第一部分就是添加内容。目的是输入内容后按下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 @click="remove(index)" id="x">x</span>
<span v-show="list.length!=0" id="note">共计<strong>{{ list.length }}</strong>
条笔记</span>
<span v-show="list.length!=0" @click="clear" id="Clear">清空</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: "睡觉"
},
remove: function (index) {
this.list.splice(index, 1);
},
clear: function () {
this.list = [];
}
methods: {
add: function () {
this.list.push(this.addValue);
}
}
})
</script>
当list中的长度不为0,即list中有内容时,这一行字将会显示,否则就不显示。
Vue的部分做完了,剩下的就是css调样式了,此处就直接给程序了