13 笔记

记事本

第一部分就是添加内容。目的是输入内容后按下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调样式了，此处就直接给程序了