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 相关文章推荐
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
javascript动态加载实现方法一
Aug 22 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
JS简单判断是否在微信浏览器打开的方法示例
Jan 08 Javascript
微信小程序之左右布局的实现代码
Dec 13 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
微信小程序自定义胶囊样式
Dec 27 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自定义大小验证码的方法详解
2013/06/07 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
ES6的新特性概览
2016/03/10 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
JS设计模式之数据访问对象模式的实例讲解
2017/09/30 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
vue项目中使用fetch的实现方法
2019/04/25 Javascript
KnockoutJS数组比较算法实例详解
2019/11/25 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[00:20]TI9不朽观赛名额抽取
2019/08/05 DOTA
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
python 用 xlwings 库 生成图表的操作方法
2019/12/22 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
聊聊python中的循环遍历
2020/09/07 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
Kivari官网:在线购买波西米亚服装
2018/10/29 全球购物
应届生会计求职信
2013/11/11 职场文书
生物技术专业求职信
2014/06/10 职场文书
贷款委托书
2014/08/01 职场文书
营销学习心得体会
2014/09/12 职场文书
清洁工个人总结
2015/03/04 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
小学教师教学随笔
2015/08/14 职场文书