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

Vue.js小demo的更多相关文章

  1. vue.js小总结

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统; 指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性; v-for 指令可以绑定数组的数据来渲染一个项目列 ...

  2. Vue.js小案例(2)

    即时搜索 这个例子主要应用了vue.js的自定义过滤器,可以通过Vue.filter()注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cloak] ...

  3. vue传值(小demo)

    vue+element ui实现的.解释大多在代码中(代码臭且长,有错误请指正)-- 代码如下: <template>  <div class="userList" ...

  4. Vue.js小案例(1)

    数据绑定 数据绑定是vue.js的基础.本例中就是利用了vue.js的v-model指令在表单元素上创建双向数据绑定. <!--这是我们的View--> <div id=" ...

  5. Vue.js小游戏：测试CF打狙速度

    此项目只测试反应速度,即手点击鼠标的反应速度 html代码 <div id="top">请等待图片变颜色,颜色便的那一刻即可点击测手速</div> < ...

  6. Vue.js小案例、生命周期函数及axios的使用

    一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...

  7. 每天一个JS 小demo之商品下架特效制作，主要知识点：定时器，倒计时，抖动特效。PS：由于不方便上传文件夹，只能上传效果图，图片等素材需自寻哟。

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. 每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用

    @charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...

  9. 每天一个JS 小demo之通过事件委托实现菜单展开及选中特效。主要知识点：事件

    <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...

随机推荐

  1. ThinkPHP5.0框架开发--第5章 TP5.0 控制器

    ThinkPHP5.0框架开发--第5章 TP5.0 控制器 第5章 TP5.0 控制器 ============================================== 上次复习 1.路 ...

  2. [NOI.AC 2018NOIP模拟赛 第三场 ] 染色 解题报告 （DP）

    题目链接:http://noi.ac/contest/12/problem/37 题目: 小W收到了一张纸带,纸带上有 n个位置.现在他想把这个纸带染色,他一共有 m 种颜色,每个位置都可以染任意颜色 ...

  3. flex布局下img变形的问题

    flex-shrink  加上:flex-shrink:0:定义了缩小比例,默认为1,即如果空间不足,项目将会缩小所有项目为1时,空间不足,都会缩小,如果你不希望某个容器在任何时候都不被压缩,那设置f ...

  4. .net垃圾回收-原理浅析

    本文引自:http://www.cnblogs.com/wilber2013/p/4357910.html 在开发.NET程序过程中,由于CLR中的垃圾回收(garbage collection)机制 ...

  5. 07:清泉-改（prime+堆）

    时间限制:  10000ms 单个测试点时间限制:  1000ms 内存限制:  512000kB 描述 华北电力大学可以抽象为一张有n个点m条边的无向图. 现在所有的边都断了. 修复每条边都有个不同 ...

  6. IOS设备获取崩溃日志的办法

    除了用xcode 的devices功能获取之外,在windows下面也是可以获取的.首先安装itools.下载地址: http://www.itools.cn/ 安装好后将设备(iphone或ipad ...

  7. Linux 清空缓存

    sync echo 1 > /proc/sys/vm/drop_caches echo 2 > /proc/sys/vm/drop_caches echo 3 > /proc/sys ...

  8. proxy in java

    [Static] IFeature.java ImpicateF.java Runport.java StaticProxy.java IFeature.java package UProxy.sta ...

  9. 优动漫PAINT基础系列之拾色器教学

    在优动漫PAINT中有类似Photoshop的拾色器功能么?在优动漫PAINT中,可以直接输入颜色数值选择颜色么?当然是可以的啦!怎么呼出拾色器界面~ 看这边... 前段时间小编有收到一些小伙伴的疑问 ...

  10. H3C S5130交换机堆叠操作

    配置过程中注意事项: 1.最好提前定义好IRF的主从设备,可通过IRF优先级进行定义,越大越优 2.一定要在使能IRF之前就保存配置(因为使能过程中,会出现设备重启的情况,如果设备重启后配置丢失,会导 ...