zoukankan      html  css  js  c++  java
  • 走进Vue的第五天

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>todoList删除</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="root">
            <input type="text" v-model="inputValue">
            <input type="button" value="Go" @click="toList">
    
            <!--使用组件-->
            <ul>
                <!--监听delete事件(在实例中接收)-->
                <item-list v-for="(item,index) in list" :content="item" :index="index" @delete="toDel"></item-list>
            </ul>
        </div>
    
        <script>
            //定义全局组件
            Vue.component('item-list',{
                props:['content','index'],
                template:"<li>{{content}}&nbsp;&nbsp;&nbsp;&nbsp;<span @click='deleteData'>删除</span></li>",
                methods:{
                    deleteData:function () {
                        //对外放开一个delete事件(然后在组件中监听)
                        this.$emit('delete',this.index);
                    }
                }
            });
    
            new Vue({
                el:"#root",
                data:{
                    inputValue:"",
                    list:[]
                },
                methods:{
                    toList:function () {
                        this.list.push(this.inputValue);
                        this.inputValue='';
                    },
                    toDel:function (index) {
                        this.list.splice(index,1);
                    }
                }
            })
        </script>
    </body>
    </html>
  • 相关阅读:
    Java Logging: Log Levels
    Java Logging: Logger Hierarchy
    Java Logging: Logger
    Java Logging: Basic Usage
    Use final liberally
    Writing Final Classes and Methods
    Java Logging: Overview
    base Tag
    DOM Nodes
    Browser environment
  • 原文地址:https://www.cnblogs.com/jiangshiguo/p/11245323.html
Copyright © 2011-2022 走看看