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.cookie.js用法实例详解
Dec 25 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
vue2组件之select2调用的示例代码
Oct 12 Javascript
jQuery Dom元素操作技巧
Feb 04 jQuery
Vue模拟数据,实现路由进入商品详情页面的示例
Aug 31 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
详解服务端预渲染之Nuxt(介绍篇)
Apr 07 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
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
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
Javascript前端下载后台传来的文件流代码实例
2020/08/18 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
python Django框架实现自定义表单提交
2016/03/25 Python
centos6.4下python3.6.1安装教程
2017/07/21 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
python判断字符串或者集合是否为空的实例
2019/01/23 Python
opencv与numpy的图像基本操作
2019/03/08 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
浅谈Python type的使用
2019/11/19 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
python求解汉诺塔游戏
2020/07/09 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
Trench London官方网站:高级风衣和意大利皮夹克
2020/07/11 全球购物
见习报告的格式
2014/10/31 职场文书
会计工作态度自我评价
2015/03/06 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
Golang表示枚举类型的详细讲解
2021/09/04 Golang