zoukankan      html  css  js  c++  java
  • Vue.js小demo

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="./vue.js"></script>
    </head>
    <body>
        <div id="root">
            <!-- <input type="text" v-model="msg">
            <button @click="handleClick">submit</button>
            <ul>
                <li v-for="(item, index) in items" :key="index">{{item}}<span @click="deleteClick(index)">delete</span></li>
            </ul> -->
        </div>
        <script>
    Vue.component("item-list", {
        template: `
            <li>{{itemprops}}<span @click="handleDeleteSon(index)">delete</span></li>
            `,
        props: ["itemprops", "index"],
        methods: {
            handleDeleteSon(index) {
                this.$emit("handleDeleteS", index);
            }
        }
    });
    
    var app = new Vue({
        el: "#root",
        data: {
            msg: '',
            items: []
        },
        template: `
            <div>
                <input type="text" v-model="msg">
                <button @click="handleClick">submit</button>
                <ul>
                <item-list v-for="(item, index) in items" :key="index" :itemprops="item" :index="index" @handleDeleteS="deleteClick"></item-list>
                </ul>
            </div>
            `,
        methods: {
            handleClick() {
                this.items.push(this.msg);
                this.msg = '';
            },
            deleteClick(index) {
                this.items.splice(index, 1);
            }
        }
    });
        </script>
    </body>
    </html>
    
  • 相关阅读:
    gorm 更新数据时,0值会被忽略
    xshell评估过期解决办法
    安装zoom
    aria2 加速百度网盘下载
    ubuntu17.10 安装firefox的flash
    c++ 回调函数使用
    ubuntu17 安装中文输入法
    ubuntu python3.6 找不到_sqlite3
    linux 获取CPU个数
    centos7 yum与Python3冲突
  • 原文地址:https://www.cnblogs.com/intelwisd/p/9185474.html
Copyright © 2011-2022 走看看