vue.js中 v-for,v-on,v-model,结合应用案例---记事本

DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>title>
        <style>
            #lb{
                list-style: none;
            }
            #lb li{
                position: relative;
                border-bottom: 1px solid black;
                width: 200px;
                height: 50px;
                line-height: 50px;
            }
            #xh{
                background-color: orange;
                padding: 10px;
                margin-right: 10px;
            }    
            #qc{
                position: absolute;
                right: 0px;
                background-color: antiquewhite;
                padding: 2px;
                height: 30px;
                line-height: 30px;
            }
        style>
    head>
    <body>
                        
        <h2>记事本h2>
        <header id="top">
            <input type="text" v-model="mrvalue" @keyup.enter="add"/>
            <ul id="lb">
                
                <li v-for="(item,index) in list">
                    
                    <span id="xh">{{index+1}}span>
                    
                    <span>{{item}}span>
                    
                    
                    <span id="qc" @click="remove(index)">Xspan>
                li>
                
                <span v-if="list.length!=0">
                    {{list.length}}
                span>
                
                <button @click="clear" v-show="list.length!=0">clearbutton>
            ul>
        header>
        
                
        
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
        <script>
            var top= new Vue({
                el:"#top",
                data:{
                    list:["学习","吃饭","睡觉"],
                    mrvalue:"好好学习,天天向上"
                },
               methods:{
                   // 输入添加
                   add:function(){
                       this.list.push(this.mrvalue);
                   },
                   // 将索引传递过来
                   remove:function(index ){
                       // console.log("删除");
                       // console.log(index);
                       // 按照索引删除
                       this.list.splice(index,1);
                   },
                   clear:function(){
                       this.list=[];
                   }
                   
               }
            })
        script>
        
        
        
    body>
html>

效果图

vue.js中 v-for,v-on,v-model,结合应用案例---记事本_第1张图片

 

你可能感兴趣的:(vue.js中 v-for,v-on,v-model,结合应用案例---记事本)