vue.js如何实现点击按钮动态添加li
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head> <body>
<div id="todo-list-example">
<button v-on:click="ss">保存 </button>
<ul>
<li is="todo-item" v-for="(todo, index) in todos" v-text="sv" v-on:click="hh"></li>
</ul>
</div>
</body>
<script>
Vue.component('todo-item', {
template: `
<li v-on:click="$emit('click')">
{{ text }}
</li>`,
props: ['text']
})
new Vue({
el: '#todo-list-example',
data: {
todos: [
'+添加'
],
sv:'+添加'
},
methods: {
ss: function() {
this.todos.push(this.sv)
},
hh:function(){
alert(1)
}
}
})
</script> </html>
vue.js如何实现点击按钮动态添加li的更多相关文章
- js动态添加li,你添加的li具有你绑定的事件
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 <%@page i ...
- jQuery动态添加li标签并添加属性和绑定事件
代码如下: <%@page import="java.util.ArrayList"%> <%@ page language="java" c ...
- 使用JS代码实现点击按钮下载文件
有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...
- CSS3和js炫酷点击按钮3D翻转动画特效
简要教程 flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效.该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的. 在线预览 源码下载 ...
- js 实现页面点击按钮复制内容
前言: 我们平时在页面中是按照长按来实现复制相关的内容,那么怎么用js实现点击按钮实现复制相关的内容呢?请看如下方法: 实现步骤: 1.引入相关的js(ClipboardJS插件) <scrip ...
- js实现网页收藏功能，动态添加删除网址
<html> <head> <title> 动态添加删除网址 </title> <meta charset="utf-8"&g ...
- js遍历对象的属性并且动态添加属性
var person= { name: 'zhangsan', pass: '123' , 'sni.ni' : 'sss', hello:function (){ for(var i=0;i< ...
- vue.js 1.0中用v-for遍历出的li中的@click事件在移动端无效
在vue.js使用v-for遍历出的li中的@click事件在移动端无效,在网页端可以执行,代码如下 <template> <div class="rating-secti ...
- C# —— 点击按钮动态打开ComboBox
网上搜索了好多资料,大多是重绘ComboBox或者使用自定义控件创建一个全新的ComboBox(并非基于window的ComboBox). 对于菜鸟的我,实现太麻烦,有些代码理解起来困难,但是项目比较 ...
随机推荐
- Python3基础 dict fromkeys 多个键对应相同的值
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- 给sublime设置格式化代码的快捷键
sublime中自建的有格式化按钮: Edit -> Line -> Reindent 只是sublime并没有给他赋予快捷键,所以只需加上快捷键即可 Preference -& ...
- 再谈fedora下的音乐和视频播放器的安装
rpm包就相当于windows下的exe,已经是编译后的二进制代码,可以使用rpm命令或dnf install ???.rpm来安装 lnux下软件的安装跟windows不同, 后者要到处去找, 要做 ...
- LightOJ 1027 A Dangerous Maze（期望）题解
题意:n扇门,每扇门后都有一个值x,如果x<0会让你等待-x再重新回到这里选择门,x>0你经过x时间就会被传送走,问你被传送走的期望 思路:假设被传送走的期望为E,那么对于x<0来说 ...
- Why there is two completely different version of Reverse for List and IEnumerable?
https://stackoverflow.com/questions/12390971/why-there-is-two-completely-different-version-of-revers ...
- Facebook ads_Business Manager
xmind 下载链接
- CSS属性大全
字体属性:(font)大小 font-size:x-large;(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD样式 font-style:oblique;(偏 ...
- 关于在mac安装安卓的模拟器的一些些那点事情~~~
ook~~自己捣鼓了三天终于安装成功了~妹的~踩了太多的坑~整个人就不好了~ 为了节省大家的时间~所以今天我就将我安装的过程整体思路教给大家!有了思路安装起来就很好了!!!但是 注意的是,也许你会出现 ...
- 项目Alpha冲刺——代码规范、冲刺任务与计划
作业要求 这个作业属于哪个课程 软件工程1916-W(福州大学) 这个作业要求在哪里 项目Alpha冲刺 团队名称 基于云的胜利冲锋队 项目名称 云评:高校学生成绩综合评估及可视化分析平台 这个作业的 ...
- Django与缓存
我们都知道Django建立的是动态网站,正常情况下,每次请求过来都经历了这样一个过程: 接收请求 -> url路由 -> 视图处理 -> 数据库读写 -> 视图处理 -> ...