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>
Vue.js小demo的更多相关文章
- vue.js小总结
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统; 指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性; v-for 指令可以绑定数组的数据来渲染一个项目列 ...
- Vue.js小案例(2)
即时搜索 这个例子主要应用了vue.js的自定义过滤器,可以通过Vue.filter()注册一个全局过滤器,具体用法可以参考这里,vue.js也提供了一些内置过滤器. CSS代码: [v-cloak] ...
- vue传值(小demo)
vue+element ui实现的.解释大多在代码中(代码臭且长,有错误请指正)-- 代码如下: <template> <div class="userList" ...
- Vue.js小案例(1)
数据绑定 数据绑定是vue.js的基础.本例中就是利用了vue.js的v-model指令在表单元素上创建双向数据绑定. <!--这是我们的View--> <div id=" ...
- Vue.js小游戏：测试CF打狙速度
此项目只测试反应速度,即手点击鼠标的反应速度 html代码 <div id="top">请等待图片变颜色,颜色便的那一刻即可点击测手速</div> < ...
- Vue.js小案例、生命周期函数及axios的使用
一.调色框小案例: 随着三个滑动框的变化,颜色框的颜色随之改变 1.1.实例代码 <!DOCTYPE html> <html lang="en" xmlns:v- ...
- 每天一个JS 小demo之商品下架特效制作，主要知识点：定时器，倒计时，抖动特效。PS：由于不方便上传文件夹，只能上传效果图，图片等素材需自寻哟。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 每天一个JS 小demo之韩雪冬轮播图。主要知识点：html，css布局，对于数组和对象的理解和运用
@charset "utf-8"; /* CSS Document */ ;; } li { list-style: none; } img { border: none; } b ...
- 每天一个JS 小demo之通过事件委托实现菜单展开及选中特效。主要知识点：事件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
随机推荐
- 三个获取浏览器URL中参数值的方法
这三个是一般的获取浏览器传的参数值的方法,之前有用unescape()解码的方法,但是遇到汉字会产生乱码,所以用decodeURI(); 方法一: function getQueryString(na ...
- （转载）Android之三种网络请求解析数据(最佳案例)
[置顶] Android之三种网络请求解析数据(最佳案例) 2016-07-25 18:02 4725人阅读 评论(0) 收藏 举报 分类: Gson.Gson解析(1) 版权声明:本文为博主原创 ...
- 压缩图片C#算法
转载自 http://www.open-open.com/lib/view/open1391348644910.html using System.IO; using System.Drawing; ...
- 阿里云ecs : Couldn't connect to host, port: smtp.aliyun.com, 25; timeout -1;
上传到服务器后javamail发邮件异常 链接 原来是ECS基于安全考虑,禁用了端口25. 改成465就可以发邮件了. p.setProperty("mail.smtp.socketFact ...
- 来，我们来聊聊怎么学好3dMax三维建模这款软件
效果图公司近年来的发展体现了流行3D技术,而3D技术的应用也越来越广泛,3D为电脑效果图制作的主力.室内效果是设计师进行设计后所达到的效果,除了通常采用的方法外,还应该积极地找寻一种适合的教学方法,培 ...
- Dapper基础知识二
在下刚毕业工作,之前实习有用到Dapper?这几天新项目想用上Dapper,在下比较菜鸟,这块只是个人对Dapper的一种总结. 2,如何使用Dapper? 首先Dapper是支持多种数据库的 ...
- Python3基础笔记---模块
参考博客:Py西游攻关之模块 模块的概念: 我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式.在Python中,一个.py文件就称之为 ...
- k8s使用ceph存储
目录 ceph配置 k8s 配置 通过静态pv,pvc使用ceph 测试多pod挂载静态pv数据不一致问题 StoragaClass 方式 ceph 常用命令 k8s 常用命令 k8s各类端口及IP说 ...
- JavaScript函数写法整理
1.普通函数定义的两种写法 function hello(){ console.log("hello!"); } var hello = function(){ console.l ...
- CodeVS 1789 最大获利
1789 最大获利 2006年NOI全国竞赛 时间限制: 2 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 新的技术正冲击着 ...