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 可以拖动的DIV(二)
Jun 26 Javascript
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
Javascript 类型转换方法
Oct 24 Javascript
div层的移动及性能优化
Nov 16 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
angularJs使用$watch和$filter过滤器制作搜索筛选实例
Jun 01 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
JS事件流与事件处理程序实例分析
Aug 16 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
也谈截取首页新闻 - 范例
2006/10/09 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
linux中cd命令使用详解
2015/01/08 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
javascript CSS画图之基础篇
2009/07/29 Javascript
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
js报错 Object doesn't support this property or method的原因分析
2011/03/31 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
AngularJS实现表单验证
2015/01/28 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
深入理解node.js http模块
2018/01/24 Javascript
深入理解Node module模块
2018/03/26 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
python使用SMTP发送qq或sina邮件
2017/10/21 Python
使用Python进行目录的对比方法
2018/11/01 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
python实现扫雷游戏的示例
2020/10/20 Python
巴西女装购物网站:Eclectic
2018/04/24 全球购物
理想点亮人生演讲稿
2014/05/21 职场文书
先进工作者申报材料
2014/12/23 职场文书
建党伟业的观后感
2015/06/01 职场文书
同事去世追悼词
2015/06/23 职场文书
高中班长竞选稿
2015/11/20 职场文书
2019西餐厅创业计划书范文!
2019/07/12 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书