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"& ...
随机推荐
- [JZOJ NOIP2018模拟10.20 A组]
由于T3数据出锅,还不清楚自己的分数...估分150,前100已经拿到了,T3的50没拍过(写的就是暴力怎么拍),感觉很不稳 考试的时候就是特别的困,大概是因为早上在房间里腐败...腐败完了才睡觉 T ...
- js捕获页面回车事件
1.javascript版 document.onkeyup = function (e) { if (window.event)//如果window.event对象存在,就以此事件对象为准 e = ...
- CentOS7系统安装完MySQL后启动MySQL提示无服务
重新安装MariaDB数据库即可解决,MySQL所有命令可通用 MariaDB MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,开发这个分支的原因之一是:甲骨文公司收购了My ...
- void空类型指针
; double db = 120.3; void *p; p = # cout << *(int *)p << endl;//转换成int类型的指针,再取值 ...
- elementUI MessageBox弹框 <el-dialog>弹框如果出现input的type属性为password。项目中用到日期组件的地方会报错
ElementUI:项目中如果用到MessageBox弹框的输入框input且type为password,以及用到<el-dialog>里面用到input且type为password.此时 ...
- Android ViewPager 动画效果
找到个不错的开源项目:https://github.com/jfeinstein10/JazzyViewPager Android ViewPager 动画效果
- 【算法】Bellman-Ford算法（单源最短路径问题）（判断负圈）
单源最短路问题是固定一个起点,求它到其他所有点的最短路的问题. 算法: 设 d[i] 表示 起点 s 离点 i 的最短距离. [1.初始化] 固定起点s,对所有的点 , 如果 i = s , ...
- Java中如何解决线程安全问题
给出一个问题,如下: 解决方案如下: public class Demo_5 { public static void main(String[] args) { //创建一个窗口 TicketWin ...
- mybatis批量插入、批量更新和批量删除
转载 https://www.jianshu.com/p/041bec8ae6d3
- WebSocket 前端封装
$.extend({ socketWeb:function (opt) { if("WebSocket" in window){ var setting=$.extend({ ur ...