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 相关文章推荐
用htc组件制作windows选项卡
Jan 13 Javascript
给网站上的广告“加速”显示的方法
Apr 08 Javascript
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
详解node+express+ejs+bootstrap构建项目
Sep 27 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
nuxt框架中路由鉴权之Koa和Session的用法
May 09 Javascript
JS实现前端动态分页码代码实例
Jun 02 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 header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
PHP微信开发之微信消息自动回复下所遇到的坑
2016/05/09 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
PHP连接MySQL数据库操作代码实例解析
2020/07/11 PHP
csdn 批量接受好友邀请
2009/02/19 Javascript
对象特征检测法判断浏览器对javascript对象的支持
2009/07/25 Javascript
JQuery toggle使用分析
2009/11/16 Javascript
js离开或刷新页面检测(且兼容FF,IE,Chrome)
2014/03/05 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
js本地图片预览实现代码
2016/10/09 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
Python 除法小技巧
2008/09/06 Python
python迭代器的使用方法实例
2013/11/21 Python
使用Python下的XSLT API进行web开发的简单教程
2015/04/15 Python
python清除指定目录内所有文件中script的方法
2015/06/30 Python
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
Python中强大的命令行库click入门教程
2016/12/26 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
如何解决安装python3.6.1失败
2020/07/01 Python
python opencv角点检测连线功能的实现代码
2020/11/24 Python
澳大利亚女士时装在线:Rockmans
2018/09/26 全球购物
管理科学大学生求职信
2013/11/13 职场文书
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
学校宣传标语
2014/06/18 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
2014年财政工作总结
2014/12/10 职场文书
走进毛泽东观后感
2015/06/04 职场文书