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>

  

时间: 2024-08-05 10:41:23

vue.js如何实现点击按钮动态添加li的相关文章

JQuery实现点击按钮动态添加input文本框,限制个数

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title> <script src="jquery-min.js" type="text/javascript"></script><script type=&

js实现网页收藏功能,动态添加删除网址

<html> <head> <title> 动态添加删除网址 </title> <meta charset="utf-8"> <script> function add(){ var name = document.getElementById("name").value; var url = document.getElementById("url").value; var

CSS3和js炫酷点击按钮3D翻转动画特效

简要教程 flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效.该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的. 在线预览   源码下载 使用方法 使用该按钮过渡动画特效需要引入它提供的按钮样式表style.css和用于触发按钮点击事件的js文件script.js. HTML结构 该点击按钮过渡动画特效使用一个嵌套div的HTML结构: <div class="btn"> <div class="

easyUI树形节点点击和动态添加Tab-

easyUI是一种基于jQuery的UI框架,可以直接阅读官网的API教程学习,最近做的项目要用到这个框架,就一边看一边做,先看一下动态添加Tab,实际项目中我们都是希望点击一个节点,增加一个iframe的窗口出来,但是昨天看着API做一个简单的点击A标签增加iframe,死活就是不行,晚上回去终于搞定,看一下官方的例 [html] view plain copy print? function addTab(title, url){ if ($('#tt').tabs('exists', ti

按钮动态添加删除input

症状: 也就是实现,添加按钮不断添加新的输入框,以及删除按钮. 处方代码: <%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="/context/mytags.jsp"%> <!DO

vue项目中做点击按钮复制文本框内容

zeroclipboard是走的flash插件,手机浏览器是不支持的,所以不得不舍弃之,用clipboard,clipboard不需要flash就可以完成复制剪切等功能,而且可以兼容pc,移动端 首先要安装:cnpm install clipboard --save 然后引入包 引入:import Clipboard from 'clipboard'; 这个人地方坑会报各种依赖丢失的错,没关系,用下面的方法可以拯救 项目: . 代码: <span class="NetbarNumber&q

js第一天 点击按钮显示与隐藏

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" > window.onload=function(){ var weibo=document.getElementById('weibo'); var content=document

js jquery 实现点击按钮后,倒计时60秒才能再次点击发送验证码

1 <input type="button" id="btn" value="免费获取验证码" /> 2 <script type="text/javascript"> 3 var wait=60; 4 function time(o) { 5 if (wait == 0) { 6 o.removeAttribute("disabled"); 7 o.value="免费获取

JS 通过点击事件动态添加文本框

直接拷贝到浏览器就能实现 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Change.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <