vue笔记：v-for，v-model，记事本案例

最新推荐文章于 2024-04-23 16:51:15 发布

我是Dreamer啊

最新推荐文章于 2024-04-23 16:51:15 发布

阅读量245

点赞数 2

分类专栏：前端开发文章标签：列表 vue js html

BY Dreamer同学

本文链接：https://blog.csdn.net/weixin_42579348/article/details/113551780

版权

前端开发专栏收录该内容

57 篇文章 6 订阅

订阅专栏

v-for

根据数据生成列表结构，经常与v-for使用，语法是（item,index） in数据，item和index可以和其他指令一起使用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue1</title>     
</head>
<body>
    <div id="cpp">
        <ul>
            <li v-for="(item,index) in arr">
                {{  index+1 }}高同学：{{ item }}
            </li>
        </ul>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var cpp = new Vue({
            el:"#cpp",
            data:{
                arr:["1","2","3","4"]
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

v-model

获取和设置表单元的值（双向数据绑定）,便捷的设置和获取表单元素的值，绑定的数据会和表单元素值相关联。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue1</title>
</head>
<body>
    <div>
        <input type="text" v-model="message">
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var cpp = new Vue({
            el:"#cpp",
            data:{
                message:"高先生"
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

案例时刻

小黑记事本：

新增：生成列表结构（v-for ，数组），获取用户输入（v-model），回车新增数据（v-on ，.enter，添加数据）。
删除：点击删除指定内容（v-on，splice，索引）
统计：统计信息个数（v-text，length）
清空：点击清除所有信息（v-on，清空数组）
隐藏：没有数据时，隐藏元素（v-show，v-if，数组非空）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小高记事本</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        #todoApp{
            margin-left: 800px;
            margin-top: 300px;
            width: 300px;
            border-top:solid 2px black;
            border-left: solid 2px black;
            border-right: solid 2px black;
            background-color:blanchedalmond
        }
        h1{
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        input{
            width: 296px;
            height: 40px;
            font-size: 15px;

        }
        .view{
            height: 35px;
            font-size: 18px;
            line-height: 35px;
            background-color: white;
            border-bottom: solid 2px black;
        }
        footer{
            height: 30px;
            line-height: 30px;
            background-color: white;
            border-bottom: solid 2px black;
        }
        button{
            float: right;
            width: 40px;
            height: 35px;
            background-color: rgba(0, 0, 0, 0);
            border: rgba(0, 0, 0, 0);
        }
    </style>
</head>
<body>
    <section id="todoApp">
        <!-- 输入框 -->
        <header class="header">
            <h1>小高记事本</h1>
            <input type="text" v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo">
        </header>
        <!-- 主体区域 -->
        <section class="main">
            <ul class="todo-list">
                <li class="todo" v-for="(item,index) in list">
                    <div class="view">
                        <span class="index">{{ index+1}}.</span>
                        <label >{{ item }}</label>
                        <button class="destroy" @click="remove(index)">x</button>
                    </div>
                </li>
            </ul>
        </section>
        <!-- 统计和清空 -->
        <footer class="footer" v-if="list.length!=0">
            <span class="todo-count" >
                <strong>{{ list.length }}</strong>
                items left
            </span>
            <button class="clear-completed" @click="clear">Clear</button>
        </footer>
    </section>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#todoApp",
            data:{
                list:["111","222","333"],
                inputValue:""
            },
            methods:{
                add:function(){
                    if(this.inputValue==""){
                        alert("您没有输入内容");
                    }else{
                        this.list.push(this.inputValue);
                    }
                    
                },
                remove:function(index){
                    this.list.splice(index,1);
                },
                clear:function(){
                    this.list=[];
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

我是Dreamer啊

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue笔记：v-for，v-model，记事本案例

v-for根据数据生成列表结构，经常与v-for使用，语法是（item,index） in数据，item和index可以和其他指令一起使用。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
复制链接

扫一扫

专栏目录