<!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. iOS CoreData介绍和使用（以及一些注意事项）

    iOS CoreData介绍和使用(以及一些注意事项) 最近花了一点时间整理了一下CoreData,对于经常使用SQLite的我来说,用这个真的有点用不惯,个人觉得实在是没发现什么亮点,不喜勿喷啊.不 ...

  2. WPF学习（二） － 绑定

    绑定,这个看起来很神奇的东西,于我这种喜欢刨根儿的人而言,理解起来非常困难.    WPF绑定的核心思想是:数据层属性值的改变,能反应给展示层,反之亦然,并且这个响应的过程能被分离出来. 传统Winf ...

  3. highcharts的使用：从数据库获取数据显示在图上

    //月产量统计图 function GetHighCharts() { var date = new Date(); var year = date.getFullYear(); var month_ ...

  4. sqlserver如何给某一用户分配只能查看某一视图的权限

    exec sp_addrole 'guestview' --GRANT SELECT  ON veiw TO [guestview]; GRANT SELECT ON  CustomerInfo TO ...

  5. 如何在SQLServer中处理每天四亿三千万记录的

    项目背景 这是给某数据中心做的一个项目,项目难度之大令人发指,这个项目真正的让我感觉到了,商场如战场,而我只是其中的一个小兵,太多的战术,太多的高层之间的较量,太多的内幕了.具体这个项目的情况,我有空 ...

  6. 如何把非服务程序（一般的应用程序）注册为Windows服务

    非服务程序:不是标准的服务形式的程序吧,只是普通的应用程序. 1.要实现这个功能要用到微软提供的两个小工具“instsrv.exe”和“srvany.exe”,工具可以从微软下载安装工具包得到:htt ...

  7. ActiveMQ学习笔记（18）----Message高级特性（二）

    1. Blob Message 有些时候,我们需要传递Blob(Binary Large Objects)消息,在5.14之前,(5.12和5.13需要在jetty.xml中手动开启)可以按照如下的方 ...

  8. 理解ZBrush中的笔触

    笔触主要配合笔刷来使用,同样的笔刷搭配不同的笔触可以绘制出各种不同的效果.简言之,ZBrush 4R8就是提供了各种各样的笔触效果,例如,有模拟连贯笔触的效果,也有模拟喷枪喷洒的笔触效果. 下面简单认 ...

  9. 为什么在3ds Max 按系统默认的快捷键AIT+W 视口最大化切换没反应？

    经常使用3ds Max快捷键做效果图可谓是提高作图速度的毕竟之路,做效果图的朋友或许会遇到最大化视口显示失灵的问题,max默认快捷键为Alt+W,这里我不建议大家更改max的默认快捷键,当然Max也提 ...

  10. 【模板】扩展中国剩余定理（EXCRT）

    扩展中国剩余定理,是求解形如:$x\equiv a_{1}($ mod $b_{1})$$x\equiv a_{2}($ mod $b_{2})$$x\equiv a_{3}($ mod $b_{3} ...