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"& ...
随机推荐
- Oracle 数据泵使用详解--精华版
数据泵使用EXPDP和IMPDP时应该注意的事项: EXP和IMP是客户端工具程序,它们既可以在客户端使用,也可以在服务端使用. EXPDP和IMPDP是服务端的工具程序,他们只能在ORACLE服务端 ...
- xBIM 高级02 插入复制功能
系列目录 [已更新最新开发文章,点击查看详细] IFC 模型中的合并和删除实体是一个非常重要的任务,因为 IFC 不是一个分层结构.它是一个复杂的结构,具有潜在的循环关系,是一个双向导航.在单 ...
- Java Servlet 3.0 新特性
Servlet 3.0 新特性概述 Servlet 3.0 作为 Java EE 6 规范体系中一员,随着 Java EE 6 规范一起发布.该版本在前一版本(Servlet 2.5)的基础上提供了若 ...
- Volatile variables
Volatile variables apply another type of memory constraint to individual variables. The compiler oft ...
- 教你用webpack搭一个vue脚手架[超详细讲解和注释！]
1.适用人群 1.对webpack知识有一定了解但不熟悉的同学. 2.女同学!!!(233333....) 2.目的 在自己对webpack有进一步了解的同时,也希望能帮到一些刚接触webpack的同 ...
- curl命令查看响应时间
curl -w "%{time_namelookup}::%{time_connect}::%{time_starttransfer}::%{time_total}::%{speed_dow ...
- 洛谷——P3370 【模板】字符串哈希
题目描述 如题,给定N个字符串(第i个字符串长度为Mi,字符串内包含数字.大小写字母,大小写敏感),请求出N个字符串中共有多少个不同的字符串. 友情提醒:如果真的想好好练习哈希的话,请自觉,否则请右转 ...
- DBCA创建数据库ORA-01034 ORACLE not available
SYMPTOMS 在利用dbca创建数据库时,当设置完毕全部參数.開始装时 跑到2% 就报错 ORA-01034 ORACLE not available, 例如以下图 watermark/2/tex ...
- Codeforces 558E 线段树处理字符串内排序
给出长度为n的字符串,m个操作. 每一个操作有三个值 l,r,op. op==1,表示将字符串中[ l ,r ]的部分依照升序排列. op==0,表示将字符串中[ l ,r ]的部分依照降序排列. 输 ...
- hdu 2102 A计划 具体题解 （BFS+优先队列）
题目链接:pid=2102">http://acm.hdu.edu.cn/showproblem.php?pid=2102 这道题属于BFS+优先队列 開始看到四分之中的一个的AC率感 ...