<!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. zzulioj--1711--漂洋过海来看你(dfs+vector)

    1711: 漂洋过海来看你 Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 89  Solved: 33 SubmitStatusWeb Board D ...

  2. C#中的CSP（Communicating sequential processes）

    说起Golang(后面统称为Go),就想到他的高并发特性,在深入一些就是 Goroutine.在大家被它优雅的语法和简洁的代码实现的高并发程序所折服时,其实C#/.NET也可以很容易的做到.今天我们来 ...

  3. POJ 3188暴搜

    题意: 思路: 裸的暴搜 --. 但是要注意如果你不用所有的按键就能输出最优解的话一定要把所有的字母都安排到一个位置-. 我的一群PE就是这么来的-- 为什么写的人这么少-- // by Sirius ...

  4. 51nod 1065 最小正字段和 解决办法：set存前缀和，二分插入和二分查找

    题目: 这题要求大于0的最小字段和,常规O(n)求最大字段和的方法肯定是没法解的. 我的解法是:用sum[i]存前i项的和,也就是前缀和. 这题就变成了求sum[j]-sum[i]的大于0的最小值( ...

  5. HDU 4190 Distributing Ballot Boxes【二分答案】

    题意:给出n个城市,n个城市分别的居民,m个盒子,为了让每个人都投上票,问每个盒子应该装多少张票 二分盒子装的票数, 如果mid<=m,说明偏大了,r应该向下逼近 ,r=mid 如果mid> ...

  6. SpringCloud学习笔记（10）----Spring Cloud Netflix之声明式 REST客户端 -Feign的高级特性

    1. Feign的默认配置 Feign 的默认配置 Spring Cloud Netflix 提供的默认实现类:FeignClientsConfiguration 解码器:Decoder feignD ...

  7. ZBrush功能特性之法线贴图

    ZMapper是ZBrush2.0推出的免费法线贴图插件.使用ZBrush革命性的多级别精度和新型的照明-快速光线跟踪器,ZMapper可以在几秒内产生适用于任何游戏引擎的法线贴图,不过3.5版本以后 ...

  8. 安卓、safari和微信各个浏览器的设计标准

  9. js的运算小数点的问题

    问题这样的: 37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这 ...

  10. Vue 中 换行符获取

    当要获取到 vue 中 文本域的换行符时, 需要用到正则匹配. let reg = new RegExp('/n',"g"); let str = text.replace(reg ...