vue.js 实现点击按钮动态添加li的方法


Posted in Javascript onSeptember 07, 2018

如下所示:

<!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的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中获取元素索引的函数
Sep 10 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
JavaScript中的数据类型转换方法小结
Oct 26 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
angular中实现li或者某个元素点击变色的两种方法
Jul 27 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
JS实现自定义弹窗功能
Aug 08 Javascript
浅谈让你的代码更简短,更整洁,更易读的ES6小技巧
Oct 25 Javascript
vue中引入第三方字体文件的方法示例
Dec 17 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
vue 点击按钮增加一行的方法
Sep 07 #Javascript
详解使用jest对vue项目进行单元测试
Sep 07 #Javascript
Vue 实现列表动态添加和删除的两种方法小结
Sep 07 #Javascript
koa-router源码学习小结
Sep 07 #Javascript
Vue.js实现表格渲染的方法
Sep 07 #Javascript
vue基于element的区间选择组件
Sep 07 #Javascript
vue-cli监听组件加载完成的方法
Sep 07 #Javascript
You might like
php 随机数的产生、页面跳转、件读写、文件重命名、switch语句
2009/08/07 PHP
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
php中magic_quotes_gpc对unserialize的影响分析
2014/12/16 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
PHP 裁剪图片
2021/03/09 PHP
js 数组克隆方法 小结
2010/03/20 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
浅谈$_FILES数组为空的原因
2017/02/16 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
2018/04/08 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
js字符串类型String常用操作实例总结
2019/07/05 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
Python3读取文件常用方法实例分析
2015/05/22 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
简单实现python聊天程序
2018/04/01 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
欧洲领先的技术商店:eibmarkt.com
2019/05/10 全球购物
给国外客户的邀请函
2014/01/30 职场文书
店长职务说明书
2014/02/04 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
观看禁毒宣传片后的感想
2015/08/11 职场文书
Java8 Stream API 提供了一种高效且易于使用的处理数据的方式
2022/04/13 Java/Android
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python