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

布满荆棘的人生 2022-10-26 14:15 102阅读 0赞

### 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>

![在这里插入图片描述][20210202132448265.png_pic_center]

### 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>

![在这里插入图片描述][20210202132501188.png_pic_center]

### 案例时刻 ###

小黑记事本：

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

[20210202132448265.png_pic_center]: /images/20221024/aad0976d203d4b0cb0ea08bfe8f1375b.png
[20210202132501188.png_pic_center]: /images/20221024/d49ef17adce945f492aba6d7c049b98c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/edb821a031d249449da4163a1e44876b.png