vue学习3

最新推荐文章于 2024-05-29 17:10:32 发布

像风Wind

最新推荐文章于 2024-05-29 17:10:32 发布

阅读量65

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_45725487/article/details/116494063

版权

vue学习3

小黑记事本案例：

记事本功能：

1，新增项目

2，删除项目

3，统计项目

4，清空项目

5，隐藏项目

新增项目：v-for，v-model，v-on指令的应用

addValue:function(){

this.list.push(this.inputValue)

删除项目：

splice(开始删除的下标，删除的个数)

removeValue:function(index){

this.list.splice(index, 1)

清空项目：给clear一个方法：

clearList:function(){

this.list = [] 清空列表

隐藏功能没做出来不知道哪里的原因....

附代码和效果图：

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小黑记事本</title>
</head>
<body>
    <!-- 主题区域 -->
    <div id="toduapp">
        <h1>小黑记事本</h1>
        <!-- 输入框 -->
        <input type="text" v-model="inputValue" @keyup.enter="addValue" autofocus='autofocus' autocomplete="off" placeholder="请输入任务">
        <!-- 列表区域 -->
        <ul>
            <li v-for="(item, index) in list" @click="removeValue(index)">
                {{ index + 1 }}-{{ item }}
                <span>点击删除</span>
            </li>
        </ul>
        <footer v-if="list.length>0">
            <span>一共：{{ list.length }}条信息</span>
            <span @click="clearList">clear</span>
        </footer>
    </div>
</body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#toduapp",
            data: {
                list: ['写代码', '吃饭饭', '睡觉觉'],
                inputValue: '好好学习！',
            },
            methods: {
                
                addValue:function(){
                    this.list.push(this.inputValue)
                },

                removeValue:function(index){
                    this.list.splice(index, 1)
                },
              
                clearList:function(){
                    this.list = []
               }
            }
        })
    </script>

 
</html>

像风Wind

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue学习3

vue学习3小黑记事本案例：记事本功能：1，新增项目2，删除项目3，统计项目4，清空项目5，隐藏项目新增项目：v-for，v-model，v-on指令的应用addValue:function(){this.list.push(this.inputValue)删除项目：splice(开始删除的下标，删除的个数)removeValue:function(index){...
复制链接

扫一扫