【Vue 案例】记事本 - 大数据男孩

【Vue 案例】记事本 [ 编程杂谈 ]

大数据男孩文章正文

明妃

{{nature("2022-08-14 17:23:18")}}更新

案例介绍

CSS 有点丑，但是功能完整，将就看一下

完整代码：https://pan.bigdataboy.cn/#/s/Oeia

点击回车键添加内容
清空所有内容
总条数显示
内容删除
清空内容，隐藏底部条数与清空按钮

[ mark ]()

功能说明

内容添加

v-model 绑定表单内容用于数据绑定，@keyup.enter绑定回车键事件，添加内容
<input type="text" v-model="inputValue" @keyup.enter="add"/>

内容显示及删除

v-for 循环数组，显示内容。@click绑定点击事件，删除内容

<ul>
    <li v-for="( item,index) in list">
        <span>{{ index + 1 }}</span>
        <span>{{ item }}</span>
        <button class="remove" @click="remove(index)" > X </button>
    </li>
</ul>

显示总条数及清空

v-show 判断是否显示，{{list.length}}显示总条数， @click绑定点击事件，用于清空数组

<div v-show="list.length != 0">
    <span>{{list.length}} items</span>
    <button class="clear" @click="clear">Clear</button>
</div>

Vue 代码

var vue = new Vue({
    el: "#app",
    data:{
        // 内容数组
        list:["吃饭饭","睡觉觉","打豆豆"],
        // 输入的内容
        inputValue:"",
    },
    methods:{
        // 添加
        add:function(){
            this.list.push(this.inputValue)
        },
        // 移除
        remove:function(index){
            this.list.splice(index,1)
        },
        // 清空
        clear:function(){
            this.list = []
        }
    }
})