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). 对于菜鸟的我,实现太麻烦,有些代码理解起来困难,但是项目比较 ...
随机推荐
- dart基础计数器
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends S ...
- 从0开始安装fedora23的笔记-- 以及使用fedora的常规问题
关于安装过程中的笔记本 触摸板 和鼠标的问题? 在安装过程中, 系统只认从usb接口插入的鼠标和触摸板上的 "左键和右键"按钮. 触摸板上的鼠标只支持"移动"的 ...
- FJUT3574 HOME_W的附加题（带权线段树）题解
题意: 给定n个数a1,a2,a3,……an.和m次操作. 每次操作格式如下 x y k 表示将a[x]替换为y.并求替换后,前k小的数之和 思路:我们用带权线段树维护权值,这里就是维护i的个数n ...
- 【做题】CF119D. String Transformation——KMP
题意:有两个字符串\(a,b\),下标从\(0\)开始.求数对\((i,j)\)满足\(a[i+1:j] + r(a[j:n]) + r(a[0:i+1]) = b\),其中\(r(s)\)表示字符串 ...
- (zhuan) Deep Deterministic Policy Gradients in TensorFlow
Deep Deterministic Policy Gradients in TensorFlow AUG 21, 2016 This blog from: http://pemami49 ...
- mybatis配置文件namespace用法总结
本文为博主原创,未经允许不得转载: 由于在应用过程中,发现namespace在配置文件中的重要性,以及配置的影响,在网上看了很多博客,发现很多人对namespace存在误解, 所以总结一下namesp ...
- spring applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...
- Linux下清空或删除大文件内容的2种方法
在Linux终端下处理文件时,有时候我们想要直接清空文件的内容时但又不用使用任何Linux命令行编辑器,去打开这些文件.那如何才能达到这个目的呢? 1.通过重定向到NULL来清空文件内容 清空或者让一 ...
- Jenkins参数化构建（一）之 Maven Command Line传递TestNG构建参数
1. Maven使用 -D参数名称 将参数传递至所运行项目 Maven指定TestNg.xml文件 clean test -DsuiteXmlFile=src/main/resources/testn ...
- 【Java】【异常】
java中2种方法处理异常:1.在发⽣异常的地方直接处理:2.将异常抛给调用者,让调⽤者处理.异常分类1.检查性异常: java.lang.Exception2.运⾏期异常: java.lang.Ru ...